我一直在编码一个登录屏幕，但我有一个问题，当检查我的页面在较小的设备，我已经居中的所有内容的页面，当我打开它在我的计算机的浏览器，它看起来不错，但当我检查它与浏览器开发工具与较小的设备外观，它显示所有的方式，我的屏幕的左边。以下是该页面的代码：

<TypeUser/>
      <div className="center">
        <div
          className="w-100 align-self-start p-5" style={{ maxWidth: 700 }}>
          <h1
            className="text-center  text-light">
            Regístrate / Inicia sesión
          </h1>
          <p className="text-center pb-3 mb-3 text-light">
          Descubre los mejores eventos en tu ciudad.
          </p>
          <form onSubmit={requestOTP}>
            <div className="row">
              <div className="col-12">
                <div className="position-relative mb-4">
                  <label htmlFor="phoneNumberInput" className="form-label fs-base text-light">
                    Inicia sesión con tu teléfono
                  </label>
                  <input
                    type="tel"
                    id="phoneNumberInput"
                    value={phoneNumber}
                    onChange={(event) => {
                      setPhoneNumber(event.target.value)
                      setExpandForm(false)
                      setErrorMessage(null)
                    }}
                    className="form-control form-control-lg"
                    placeholder='Número de teléfono móvil'
                  />
                </div>
                { expandForm === true
                  ? <>
                    <div className="position-relative mb-4">
                    <label htmlFor="otpInput" className="form-label fs-base text-light">Código de verificación</label>
                      <input
                        type="number"
                        id="otpInput"
                        value={OTP}
                        className="form-control form-control-lg"
                        placeholder='Código de verificación'
                        onChange={(event) => {
                          setOTP(event.target.value)
                        }}
                      />
                    </div>
                    <button
                      type='button'
                      disabled={OTP.length <= 5}
                      className="btn btn-lg btn-primary btn-block mb-3"
                      onClick={(event) => {
                        setErrorMessage(null)
                        verifyOTP(event)
                      }}
                      >
                        {`${isLoading ? 'Validando...' : 'Validar código'}`}
                      </button>
                  </>
                  : null
                }
                <AlertErrorForm messageError={errorMessage} />
                {
                  expandForm === false
                    ? <button type="submit" disabled={phoneNumber.length <= 12} className="btn btn-lg btn-primary btn-block mb-3">Solicitar código</button>
                    : null
                }
                  <div id="recaptcha-container"></div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

我也有这个css代码，我用来把一切都在中间的浏览器外观：

.center{
  padding-top: 8%;
  padding-left: 25%;
  text-align: center;
}