Form moves to weird positions when typing

I have this login form for a web application I am building and whenever someone clicks on the input boxes to type the whole screen seems to move around and go out of whack. I'm not sure what's causing this issue but any help is appreciated

I tried using scroll padding but I'm not exactly sure if I used it right or not.

<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>

CSS:

    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%;

}

}