CSS样式异常：共同设置的类下用户名、密码输入框尺寸差异大

• 类名复用引发的样式误匹配
  你写的统一规则 .username, .password 原本的设计目标，是给两个包裹输入框的外层div（用户名输入区、密码输入区）设置统一的胶囊样式、内外边距、背景效果。但在HTML结构中，密码区域内部的<input>元素也被加上了class="password"，导致这个选择器同时命中了外层div、内部的密码输入框。
  最终的样式生效逻辑：
  • 用户名输入区：仅外层div命中统一样式，内部input是class="text"，没有被选中，保持基础输入框的尺寸
  • 密码输入区：外层div命中统一样式，内部input也因为重名同时命中同一规则，额外叠加了边框、内边距、圆角样式，和用户名区域的尺寸表现完全不一致
• CSS语法错误引发的连锁排版异常
  .login-div规则中的background-color: #fff末尾漏写分号，会导致紧随其后的padding: 60px声明失效，容器内的元素排版尺寸也会出现偏移。

• 解决类名冲突：把密码输入框的类名修改为无重名的标识，比如将<input type="text" class="password" placeholder="password">改为<input type="text" class="pwd-field" placeholder="password">，确保.username, .password规则仅匹配两个外层包裹容器，不会误作用到内部输入框。
• 补全语法错误：将.login-div中的样式声明补全为background-color: #fff;，保证内边距规则正常生效。
• 为了让两个输入区内的输入框尺寸完全统一，可追加针对内部input的统一样式规则，适配外层胶囊容器的宽度：

  .username input, .password input {
    width: calc(100% - 50px);
    vertical-align: middle;
  }
  

内容的提问来源于stack exchange，提问作者Phill Davis