Buttons move around when resizing window - html

Question

Everything on my page centers horizontally, including my buttons. However - when I resize my window, the buttons move vertically and off the page. Here is my jsfiddle: http://jsfiddle.net/rjord00r/utjhyckt/
.buttons {
text-align: center;
margin-top: 380px;
}
.buttons button {
padding: 8px;
border: none;
background-color: lightgrey;
font-weight: 500;
font-size: 13px;
position: relative;
text-align: center;
}
Thanks for your help!

Answer 1

This for you:
.searchBox{
position: fixed;
top: 50%;
left: 50%;
margin-top: -92px;
margin-left: -225px;
width: 450px;
text-align:center;
}
.logo {
width: 272px;
}
.search {
width: 450px;
height: 28px;
margin:15px 0px;
}
.search-bar{
position:relative;
}
#icon img {
position: absolute;
height: 28px;
width: 30px;
right: 0px;
top: 18px;
}
input:focus {
border-color: blue;
}
.buttons {
text-align: center;
}
.buttons button {
padding: 8px;
border: none;
background-color: lightgrey;
font-weight: 500;
font-size: 13px;
position: relative;
text-align: center;
}
<div class="searchBox">
<div class="centered">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="search-bar">
<form>
<input type="text" class="search">
<div id="icon">
<img src="http://i.imgur.com/l5S4LZ2.png" />
</div>
</form>
</div>
<div class="buttons">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
</div>

Answer 2

There's a lot of unnecessary positioning, margins and elements in your example. To be able to achieve what I think you're after, I've had to change a few things.
See new EXAMPLE here.
Here's a summary of the changes : -
HTML
<div class="wrapper">
<div class="centered">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<form class="search-bar">
<input type="text" class="search">
<div id="icon">
<img src="http://i.imgur.com/l5S4LZ2.png" />
</div>
</form>
<div class="buttons">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
</div>
</div>
CSS
.wrapper {
display: block;
position: relative;
width: 100%;
height: 750px;
}
.centered {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.logo {
width: 272px;
}
.search {
width: 400px;
height: 28px;
}
.search-bar {
position: relative;
}
#icon img {
position: absolute;
height: 28px;
width: 30px;
right: 0px;
top: 3px;
}
.buttons {
text-align: center;
margin-top: 10px;
}
NOTE - I've removed anything from the example that I haven't changed.