Website layout getting messed up with zooming - html

Question

I am getting problems with the website I'm working on while zooming in and out. The layout is getting messed while zooming.
The items in the header won't stay centered, but moving to the left while zooming out, or moving to the right while zooming in.
Also, I have a image background (in CSS) and it won't stay centered when zooming in. Could I get some help with this problem. Thanks
Here is the HTML and CSS code:
body,
html {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
margin: 0 auto;
}
#header-wrapper {
background: #ebebeb;
width: 100%;
height: 50px;
position: fixed;
z-index: 10;
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
}
#header {
width: 80%;
height: 50px;
margin: 0 auto;
bottom: 20px;
position: relative;
}
#logo {
width: 128px;
height: 50px;
background-image: url("pictures/logo2.png");
margin-left: 250px;
float: left;
background-repeat: no-repeat;
position: relative;
top: 28px;
}
#nav-wrapper {
width: 650px;
height: 50px;
margin-right: 340px;
position: relative;
top: 35px;
}
#nav {
font-family: 'Roboto Condensed', sans-serif;
}
#nav li {
list-style-type: none;
display: inline;
padding: 10px;
font-size: 15px;
}
#home {
width: 100%;
height: 810px;
background-image: url("pictures/banner3-2.png");
background-size: cover;
position: fixed;
top: 50px;
}
#about {
width: 100%;
height: 820px;
background: #ebebeb;
position: relative;
top: 860px;
}
#lorem {
width: 100%;
height: 820px;
background: #46717f;
position: relative;
top: 860px;
}
#contact {
width: 100%;
height: 200px;
background: black;
position: relative;
top: 860px;
}
#header-wrapper a {
color: black;
}
#header-wrapper a:link {
color: black;
text-decoration: none;
}
#header-wrapper a:hover {
color: #46717f;
}
#header-wrapper a:active {
color: white;
text-decoration: none;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/8bit-wonder" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<div id="wrapper">
<h1 id="homee"></h1>
<div id="header-wrapper">
<div id="header">
<div id="logo"></div>
<div id="nav-wrapper">
<div id="nav">
<ul class="nav">
<li>HOME
</li>
<li>ABOUT
</li>
<li>LOREM
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="home">
</div>
<div id="about">
</div>
<h1 id="aboutt"></h1>
<div id="lorem">
</div>
<h1 id="loremm"></h1>
<div id="contact"></div>
<h1 id="contactt"></h1>
</div>