title: How do I stop my divs from moving around while zooming?
body: <p>Good day everyone,</p>
  
  <p>I am working on a website for a local astronomy club that I am doing for free to build up both my portfolio and skill set.</p>
  
  <p>I have a navigation bar within my header at the top of the page. When I zoom out to about 90%  the elements within the navigation bar move around and cause the layout to look a little funky. </p>
  
  <p>If it helps, I have a live example at </p>
  
  <p><a href="http://www.JamesRobertCook.com/BCAAS/" rel="nofollow">http://www.JamesRobertCook.com/BCAAS/</a></p>
  
  <p>Here is the HTML for my navigation bar:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="header_bar"&gt;
      &lt;div id="nav"&gt;
          &lt;div id="cssmenu"&gt;
                  &lt;ul&gt;
                     &lt;li class="active"&gt;&lt;a href="index.html"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
                        &lt;ul&gt;
                           &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;Product 1&lt;/span&gt;&lt;/a&gt;
                              &lt;ul&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                 &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                           &lt;/li&gt;
                           &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;Product 2&lt;/span&gt;&lt;/a&gt;
                              &lt;ul&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                 &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                           &lt;/li&gt;
                        &lt;/ul&gt;
                     &lt;/li&gt;
                     &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the CSS associated:</p>
  
  <pre class="lang-css prettyprint-override"><code>#header_bar {
  background: rgba(44, 44, 44, 0.75);
  height: 36px;
  margin: 0 auto;
  }
  
  #nav {
  height: 36px;
  margin: 0 auto;
  width: 960px;
  }
  
  #cssmenu {
  height: 36px;
  background-color: rgb(44, 44, 44)s;
  }
  
  #cssmenu ul {
  margin: 0;
  padding: 0;
  }
  
  #cssmenu &gt; ul &gt; li {
  float: left;
  margin-left: 15px;
  position: relative;
  
  #cssmenu &gt; ul &gt; li &gt; a {
  color: rgb(160,160,160);
  font-family: Verdana, 'Lucida Grande';
  font-size: 15px;
  line-height: 36px;
  padding: 15px 85px;
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
  </code></pre>
  
  <p>I thought that sticking it inside of a container and giving it a fixed height/width would do the trick, but I tried that locally and had no success. </p>
  
  <p>Thanks for any help! If possible, <strong>could you please explain what I was doing wrong</strong>? I'd like to <strong><em>learn</em></strong> from my mistakes!</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I just noticed that when zooming, the content in my three 'featured' boxes, overlaps the respective div it lives in as well! I certainly broke something. </p>