键入时表格移动到奇怪的位置

Question

我有一个用于我正在构建的Web应用程序的登录表单，每当有人单击输入框键入内容时，整个屏幕似乎都会四处走动。我不确定是什么原因导致了此问题，但是可以提供任何帮助

我尝试使用滚动填充，但是我不确定是否正确使用滚动填充。

html, body, .grid-container-login {
    height: 100%;
    margin: auto;
    background: linear-gradient(180deg, #B31E1F 50%, #ffffff 50%) no- 
    repeat center center;
    }

    .grid-container-login {
    justify-content: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;

    }

    .welcometothe {
    background-color    : rgba(255,255,255,0.0);
    top                 : 0px;
    height              : auto;
    width               : auto;
    position            : absolute;
    margin-left: -4em;
    left                : 60px;
    -ms-transform       : rotate(0deg); /* IE 9 */
    -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
    transform           : rotate(0deg);
    font-family         : 'Saira Condensed', sans-serif;
    font-size           : 6vw;
    -moz-text-size-adjust: auto;
    -ms-text-size-adjust: auto;
    -webkit-text-size-adjust: auto;
    font-weight: 900;
    color               : rgba(255, 255, 255, 1.0);
    text-align          : center;
    line-height         : 157.0px;
    align-self: start;

    }

    .raleighpavingapp{

    align-self: start;
    background-color    : rgba(255,255,255,0.0);
    height              : auto;
    width               : auto;
    top: .5em;
    left: 4em;
    position            : relative;
    -ms-transform       : rotate(0deg); /* IE 9 */
    -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera */
    transform           : rotate(0deg);
    font-family         : 'Saira Condensed', sans-serif;
    font-size           : 6vw;
    font-weight         : 900;
    color               : rgba(255, 255, 255, 1.0);
    text-align          : center;
    line-height         : 157px;
    }

    .form {
    width: 100%;
    background: #FFFFFF;
    padding: 1rem;
    margin-top: 7vw;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 
    0, 0.24);
    }
    .login-form input {
    font-family:'Saira Condensed', sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 18px;
    }
    .login-form button {
    font-family: 'Saira Condensed', sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #b31e1f;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
    }

    .grid-container-login img{
    margin-top: 5vw;
    max-width: 40%;

    }

    @media only screen and (max-width: 600px) {
    .welcometothe {
        background-color    : rgba(255,255,255,0.0);
        top                 : 0px;
        height              : auto;
        width               : auto;
        position            : absolute;
        margin-left: -2em;
        left                : 60px;
        -ms-transform       : rotate(0deg); /* IE 9 */
        -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera 
    */
        transform           : rotate(0deg);
        font-family         : 'Saira Condensed', sans-serif;
        font-size           : 10vw;
        -moz-text-size-adjust: auto;
        -ms-text-size-adjust: auto;
        -webkit-text-size-adjust: auto;
        font-weight: 900;
        color               : rgba(255, 255, 255, 1.0);
        text-align          : center;
        line-height         : 157.0px;
        align-self: start;

    }

        .raleighpavingapp{

        align-self: center;
        background-color    : rgba(255,255,255,0.0);
        height              : auto;
        width               : auto;
        top: .5em;
        left: 1em;
        white-space: nowrap;
        position            : relative;
        -ms-transform       : rotate(0deg); /* IE 9 */
        -webkit-transform   : rotate(0deg); /* Chrome, Safari, Opera 
    */
        transform           : rotate(0deg);
        font-family         : 'Saira Condensed', sans-serif;
        font-size           : 10vw;
        font-weight         : 900;
        color               : rgba(255, 255, 255, 1.0);
        text-align          : left;
        line-height         : 100px;
    }
    .grid-container-login img{
        margin-top: 5vw;
        max-width: 80%;

    }

}

<div class="login-page">
  <div class="form">
    <form class="login-form" id="login_form"  name="login_form" method="post" action="">
      <input name="login_user" type="text" id="login_user" 
    placeholder="username" />
      <input name="login_pass" type="password" id="login_pass" placeholder="password" />
      <button> Login </button>
    </form>
  </div>
</div>