title: How can I make sure this stays centered, even when zoomed out or in?
body: <p>I'm having problems with the navigation bar on my website. All I want is for it to say where it is, right under the logo/slogan- even when you zoom out or in in your browser.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Chaotix Studios &lt;/title&gt;
          &lt;style&gt;
              * {
                  background-color:#E6E6E6;
                  font-family:Lato,Tahoma,Arial,Sans-Serif;
              }
              #coolMenu a:link{
                  color:#FFFFFF;
              }
              #top{
                  text-align:center;
                  padding-top:100px;
              }
              #coolMenu,
              #coolMenu ul {
                  list-style: none;
              }
              #coolMenu {
                  float: left;
                  padding-left:550px;
                  padding-right:500px;
                  position:absolute;
              }
              #coolMenu &gt; li {
                  float: left;
              }
              #coolMenu li a {
              display: block;
              height: 2em;
              line-height: 2em;
              padding: 0 1.5em;
              text-decoration: none;
              background-color:#000000;
              }
              #coolMenu ul {
                  position: absolute;
                  display: none;
              z-index: 999;
  
              }
              #coolMenu ul li a {
                  width: 80px;
              }
              #coolMenu li:hover ul {
                  display: block;
              }
              #body-main{
                  text-align:center;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="top"&gt;
              &lt;div id="top-wrapper"&gt;
                  &lt;div id="logo"&gt;
                      &lt;img src="http://i.imgur.com/4ReSeS7.png"&gt;&lt;br&gt;
                      &lt;h3&gt;Chaos Awaits.&lt;/h3&gt;&lt;br&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="body"&gt;
              &lt;div id="body-wrapper"&gt;
                  &lt;div id="body-main"&gt;
                      &lt;ul id="coolMenu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Mauricii&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Periher&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Hellenico&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Genere&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Indulgentia&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Tyrio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Quicumque&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I want it to look like all the time: <a href="http://i.imgur.com/RWXYTu0.png" rel="nofollow">http://i.imgur.com/RWXYTu0.png</a></p>
  
  <p>Zoomed Out: <a href="http://i.imgur.com/BoJV0WB.png" rel="nofollow">http://i.imgur.com/BoJV0WB.png</a></p>