CSS在类似元素

Question

大家。我正在开发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（注册页面）

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.

并登录.pug（登录页面）

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.

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