The same css code doesn't give me the same result

Question

I'am making a login page and i have a problem with css not making the same format for the email and the password despite writing the same code in css This is the code:

 .main { text-align: center; justify-content: center; display: flex; padding: 90px 0 90px 0; background-color: rgb(252, 252, 252); } .sub-main { display: flex; justify-content: center; height: 520px; width: 50%; box-shadow: 11px 12px 13px 12px rgb(252, 252, 252); padding-top: 5px; border-radius: 60px; background-color: rgba(210, 180, 140, 0.644); } .imgs { padding-top: 10px; justify-content: center; display: flex; } .user { height: 90px; width: 120px; border-radius: 130px; color: rosybrown; font-size: 120px; padding-bottom: 50px; } input { width: 300px; height: 50px; border-radius: 60px; box-shadow: inset 0px 0px 25px 0px #888; border: none; outline: none; background-color: #fff; } .sub-main.data.email { height: 100px; width: 30px; position: absolute; padding: 14px 0 0 25px; color: rosybrown; font-size: 30px; } .username { height: 100px; width: 30px; position: absolute; padding: 14px 0 0 25px; color: rosybrown; font-size: 30px; } .sub-main.data.password { height: 100px; width: 30px; position: absolute; padding: 14px 0 0 25px; color: rosybrown; font-size: 30px; } .name { padding-right: 30px; font-size: 20px; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .second-input { padding-top: 9px; } button { width: 380px; height: 50px; border-radius: 60px; background-color: tan; color: black; font-size: 25px; border: none; } .login-button { padding-top: 25px; }

 <div className="main"> <div className="sub-main"> <div> <div className="imgs"> <div className="user"> <i className="bi bi-person-badge-fill"></i> </div> </div> <div className="data"> <div> <input onChange={(e)=> setEmail(e.target.value)} type="text" placeholder="Adresse email" className="email" /> </div> <div> <input onChange={(e)=> setPassword(e.target.value)} type="password" placeholder="Mot de passe" className="password" /> </div> <div> <div className="login-button"> <button type="submit">Connexion</button> </div> </div> </div> </div> </div> </div>

I gave the same characteristics for both email and password but they have different formats,is it something to do with classname? This is the result i get :

Answer 1

you should change .sub-main.data.email { into .sub-main .data .email { . also same change for password is needed.