Layout issues recreating google homepage - html

Question

I'm trying to recreate the Google homepage but I'm struggling with some issues.
The footer is a bit tall and when I try and add a height figure to it, it makes the screen bigger. Also, it looks like the search buttons overlap the search box. On my browser it looks ok but I'm not sure how to get it to stay below.
How can I achieve that?
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: small;
}
ul li img {
width: 25px;
height: auto;
}
.nav {
float: right;
height: 15px;
letter-spacing: .5px;
font-weight: lighter;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
#sign-in {
background-color: #4285f4;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
li {
display: inline-block;
margin: 10px;
vertical-align: center;
}
#logo {
width: 272px;
height: 92px;
margin-left: 532px;
margin-top: 190px;
}
#input {
display: inline-block;
margin: 0 auto;
}
form input {
border: solid 1px #e5e5e5;
height: 35px;
width: 550px;
left: 30%;
position: absolute;
margin-top: 18px;
}
form input:hover {
border: solid 1px #aba2a1;
}
form input:active {
border: solid 0.5px #4285f4;
}
#left.nav {
margin-bottom: 0;
}
footer {
position: fixed;
}
.Search {
position: absolute;
display: inline-block;
top: 60%;
left: 41%;
border: none;
}
#gs {
float: left;
}
#lucky {
float: right;
margin-left: 15px;
}
button {
padding: 10px;
border: none;
background-color: #f1f1f1;
color: #757575;
font-weight: bold;
border-radius: 2px;
}
button:hover {
border: solid 1px #d7d7d7;
font-weight: bolder;
color: black;
}
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: auto;
}
#left-nav {
float: left;
}
#right-nav {
float: right;
margin-right: 25px;
}
.footer ul {
color: #757575;
}
.footer ul li {
padding-left: 8px;
}
<div class="container">
<header>
<div class="nav">
<ul>
<li>Gmail
</li>
<li>Images
</li>
<li>
</li>
<li>Sign In
</li>
</ul>
</div>
</header>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo" alt="google">
<form>
<input type="text" name="input">
</form>
<div class="Search">
<button type="button" id="gs">Google Search</button>
<button type="button" id="lucky">I'm Feeling Lucky</button>
</div>
</div>
<div class="footer">
<div id="left-nav">
<ul>
<li>Advertising
</li>
<li>Business
</li>
<li>About
</li>
</ul>
</div>
<div id="right-nav">
<ul>
<li>Privacy
</li>
<li>Terms
</li>
<li>Settings
</li>
</ul>
</div>
</div>
View on CodePen

Answer 1

Change .footer attributes to position: fixed and height: 40px to decrease footer height
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: fixed; // before: absolute
right: 0;
bottom: 0;
left: 0;
height: 40px; // before: auto
}
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: small;
}
ul li img {
width: 25px;
height: auto;
}
.nav {
float: right;
height: 15px;
letter-spacing: .5px;
font-weight: lighter;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
#sign-in {
background-color: #4285f4;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
li {
display: inline-block;
margin: 10px;
vertical-align: center;
}
#logo {
width: 272px;
height: 92px;
margin-left: 532px;
margin-top: 190px;
}
#input {
display: inline-block;
margin: 0 auto;
}
form input {
border: solid 1px #e5e5e5;
height: 35px;
width: 550px;
left: 30%;
position: absolute;
margin-top: 18px;
}
form input:hover {
border: solid 1px #aba2a1;
}
form input:active {
border: solid 0.5px #4285f4;
}
#left.nav {
margin-bottom: 0;
}
footer {
position: fixed;
}
.Search {
position: absolute;
display: inline-block;
top: 60%;
left: 41%;
border: none;
}
#gs {
float: left;
}
#lucky {
float: right;
margin-left: 15px;
}
button {
padding: 10px;
border: none;
background-color: #f1f1f1;
color: #757575;
font-weight: bold;
border-radius: 2px;
}
button:hover {
border: solid 1px #d7d7d7;
font-weight: bolder;
color: black;
}
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
}
#left-nav {
float: left;
}
#right-nav {
float: right;
margin-right: 25px;
}
.footer ul {
color: #757575;
margin-top: 3px
}
.footer ul li {
padding-left: 8px;
}
<div class="container">
<header>
<div class="nav">
<ul>
<li>Gmail
</li>
<li>Images
</li>
<li>
</li>
<li>Sign In
</li>
</ul>
</div>
</header>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo" alt="google">
<form>
<input type="text" name="input">
</form>
<div class="Search">
<button type="button" id="gs">Google Search</button>
<button type="button" id="lucky">I'm Feeling Lucky</button>
</div>
</div>
<div class="footer">
<div id="left-nav">
<ul>
<li>Advertising
</li>
<li>Business
</li>
<li>About
</li>
</ul>
</div>
<div id="right-nav">
<ul>
<li>Privacy
</li>
<li>Terms
</li>
<li>Settings
</li>
</ul>
</div>
</div>