网站布局搞砸了缩放

Question

我在放大和缩小时正在处理的网站出现问题。缩放时布局变得混乱。

标题中的项目不会保持居中，但会在缩小时向左移动，或在放大时向右移动。

另外，我有一个图像背景（在CSS中），它在放大时不会保持居中。我可以帮助解决这个问题。感谢

这是HTML和CSS代码：

＆＃13;

＆＃13;

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

＆＃13;

<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><a href="#homee" title="Return to the Homepage">HOME</a>
            </li>
            <li><a href="#aboutt" title="Return to the Homepage">ABOUT</a>
            </li>
            <li><a href="#loremm" title="Return to the Homepage">LOREM</a>
            </li>
            <li><a href="#contactt" title="Return to the Homepage">CONTACT</a>
            </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>

＆＃13;

＆＃13;

＆＃13;