title: Html div width 100% not functioning
body: <p>There are some problems with my HTML, so I am posting the code.</p>
  
  <p>The first tag is a <code>div</code> with <code>id="header"</code>. I have given it 100% width and given it a background image.  </p>
  
  <p>Inside the header there's another <code>div</code> with <code>id="header-contents"</code>. I want it centered on the page so I have given it a width and then <code>margin:0 auto</code>. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width.</p>
  
  <p>This is how it looks at first (and should always look):
  <a href="https://i.stack.imgur.com/Pvsnw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pvsnw.png" alt="intended look"></a>
  </p>
  
  <p>This is how it looks when I zoom or resize the browser:
  <a href="https://i.stack.imgur.com/VgVka.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VgVka.png" alt="after resize"></a>
  </p>
  
  <p>What is the proper HTML and CSS for it?
  Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;style&gt;
  body
  {
      margin:0;
      padding:0;
  }
  .clear
  {
      display:block;
      clear:both;
  }
  #header
  {
      min-height:156px;
      width:100%;
      background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
  }
  #head-contents
  {
      width:974px;
      margin:0 auto;
      height:156px;
  }
  #header ul
  {
      margin:85px 23px 0 0;
      float:right;
      list-style-type:none;
  }
  #header ul li 
  {
      display:inline;
  }
  #header ul li a 
  {
      margin-left:46px;
      font-size:19px;
      color:#fff;
      text-decoration:none;
  }
  #header ul li a:hover ,
  #header ul li a.active 
  {
      color:#FD7600
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
  
  &lt;div id="head-contents"&gt;
  
  &lt;img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" /&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class="active"&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;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>