Html CSS没有'；我不能在相似的元素上进行类似的工作

各位。我正在开发Node/Express+Jade应用程序。我对登录和注册页面使用了相同的样式。页面的CSS如下所示：

.form-page {
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 100%;
}
.form form .form-input {
  width: 100%;
  height: 35px;
  background-color: #505050;
  margin-bottom: 10px;
  border: none;
  padding-left: 10px;
  font-size: 16px;
  color: #FFFFFF;
}
.form form {
  margin-top: 20px;
  width: auto;
}
.form .form-header {
  font-size: 50px;
  color: #FFFFFF;
}
.form .form-header .logo {
  color: #505050;
}
form .btn-action {
  background-color: #505050;
  color: #FFFFFF;
  width: 100px;
  height: 35px;
  border: none;
  font-family: IBM Plex Mono;
  font-size: 15px;
  margin-top: 10px;
  font-weight: lighter;
}
form .btn-action:hover {
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #505050;
  cursor: pointer;
}
.form .alternative {
  font-size: 16px;
  color: #D3D3D3;
  margin-top: 10px;
}
.form .alternative .alternative-link {
  color: #FFFFFF;
}

Jade模板如下所示： register.pug（注册页）

和login.pug（登录页面）

问题是，笔记本电脑屏幕上表单输入的宽度在登录页面上比在注册页面上小，但在移动设备上相同。我如何使它们的大小相同。请注意，下面的图片大小不同，看起来很相似

---

如果你想创建一个最小的、完整的、可验证的例子：那么你是在桌面上查看同一个大小的两个窗体吗？宽度将相对于窗口宽度发生变化。@sean确实如此。

doctype html
html
  head
    title Register | Diode
    meta(name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')

    link(rel='stylesheet' type='text/css' href='/css/diode.css')
  body.form-page
    .form(align='center')
      p.form-header Register | 
        span.logo Diode
      form(method='post' action='/users/register')
        input.form-input(placeholder='Your first name' name='firstname' type='text' required)
        input.form-input(placeholder='Your last name' name='lastname' type='text' required)
        input.form-input(placeholder='Your email address' name='email' type='email' required)
        input.form-input(placeholder='Your username' name='username' type='text' required)
        input.form-input(placeholder='Your password' name='password' type='password' required)
        input.form-input(placeholder='Confirm your password' name='confirmpassword' type='password' required)
        button.btn-action(type='submit') Register
      p.alternative Already have an account? 
        a.alternative-link(href='/users/login') Log In.

doctype html
html
  head
    title Login | Diode
    meta(name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')

    link(rel='stylesheet' type='text/css' href='/css/diode.css')
  body.form-page
    .form(align='center')
      p.form-header Log In | 
        span.logo Diode
      form(method='post' action='/users/login')
        input.form-input(placeholder='Your username' name='username' type='text' required)
        input.form-input(placeholder='Your password' name='password' type='password' required)
        button.btn-action(type='submit') Log In
      p.alternative Don't have an account? 
        a.alternative-link(href='/users/register') Sign up.