title: Div widths not resizing evenly in mobile browser
body: <p>I'm building a non-responsive website with a header a footer that spans the full width of the browser window. Inside of the DIV's with a width of 100%, I nested divs with a width of 1000px that holds the header, navigation and footer contents. </p>
  
  <p>My problem is that when viewing the site on a mobile device, the navigation and footer are being scaled downed to a size that is slightly smaller than the header and main area of the site. </p>
  
  <p>What's strange is that the navigation and footer are affected while their is no issue with the header (that is built with the same approach). </p>
  
  <p>How can I get everything to scale proportionally? The width of the entire site and all of the main divs is 1000px so why are they coming out in different sizes on mobile devices?</p>
  
  <p>Here is the site's URL: <a href="http://www.test-site.co.nf" rel="nofollow">http://www.test-site.co.nf</a></p>
  
  <p>Here is a code sample:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div id="header"&gt;
  &lt;div id="header-content"&gt;
  &lt;div id="logo"&gt;
  &lt;a href="index.html"&gt;&lt;img src="img/ama-party-rentals-logo.png" height="98" width="500"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="social-icons"&gt;
  &lt;a href="" target="_blank"&gt;&lt;img class="social" src="img/icons/facebook.png" height="40" width="40"/&gt;&lt;/a&gt;
  &lt;a href="" target="_blank"&gt;&lt;img class="social" src="img/icons/googleplus.png" height="40" width="40"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="nav-bar"&gt;
  &lt;div id="nav"&gt;
  &lt;ul id="ul-nav"&gt;
  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Products&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Company&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Past &amp;nbsp; Events&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Contact &amp;nbsp; Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Francais&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header {
     background-color:#84B13F;
      width:100%;
      height:150px;
      border-bottom-style:solid;
       border-bottom-color:#648830;
    border-bottom-width:5px;
  
  
  
  
  }
  
  #header-content
  {
    width:1000px;
    height:150px;
    text-align:center;
    margin:auto;
    background-image:url('img/top-banner.png');
  
  
  }
  
  #nav-bar
  {
    width:100%;
    height:50px;
    background-color:#84B13F;
    border-bottom-style:solid;
    border-bottom-color:#648830;
    border-bottom-width:5px;
  
  }
  
  #nav
  {
        clear:both;
        margin:auto;
        height:50px;
        width:1000px;
        text-align:center;
  
  }
  </code></pre>