Hi can someone please help me with this trivial problem

'use client';
import styles from "./page.module.css";
import Login from "./login/login.jsx";

export default function Home() {
  return (
    <div className={styles.loginContainer}>
      <h2 className={styles.loginTitle}>Login</h2>
      <form className={styles.inputbox}>
        <input type="text" placeholder="Username" />
        <input type="text" placeholder="Password" />
      </form>
      <Login />
    </div>
  );
}

here is the css file

.loginContainer {
  width: 50%;
  border: 1px solid black;
}
.inputbox {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  padding-bottom: 20px;
  gap: 15px;
  font-size: 14px;
}

Im just trying to center the login container element but none of the changes that I add are being applied, I have tried doing small stuff like adding a border and none of it is working im not sure why, I have looked at the dom and its not being overwritten by any other styling either, however when I make changes to the inputbox container all the changes are being applied