I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them?
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
background: #FFFFFF;
width: 400px;
margin: 0 auto 100px;
padding: 45px;
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);
}
.inner input[type=text],
.inner input[type=password] {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.inner .RememberMe input,
.inner .RememberMe label {
float: right;
color: #b3b3b3;
font-size: 12px;
margin-bottom: 15px;
margin-top: -8px;
}
.inner button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.inner button:hover,
.inner button:active,
.inner button:focus {
background: #43A047;
}
.inner .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.inner .message a {
color: #4CAF50;
text-decoration: none;
}
.inner .checkbox {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 15px;
}
.inner .register-form {
display: none;
}
body {
/* fallback for old browsers */
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="middle">
<div class="inner">
<form class="register-form">
<input type="text" placeholder="Username" id="register_username" />
<input type="password" placeholder="Password" id="register_password" />
<input type="text" placeholder="Email address" id="register_email" />
<button id="register_button">create</button>
<p class="message">Already registered? <a href="#">Sign In</a>
</p>
</form>
<form class="login-form">
<input type="text" placeholder="Username" id="login_username" />
<input type="password" placeholder="Password" id="login_password" />
<div class="RememberMe">
<input type="checkbox" id="remember_me">
<label>Remember me</label>
</div>
<button id="login_button">login</button>
<p class="message">Not registered? <a href="#">Create an account</a>
</p>
</form>
</div>
</div>
</div>