title: div width 100 percent not working in mobile browser
body: <p>I am trying to do something that, I thought, was very simple. The header of a website I am building is a solid color that needs to span the entire width of the screen regardless of which browser it is veiwed in. What I have created so far works wonderful on desktops and laptops, but when I test it on a tablet or a mobile phone, the header does not span all the way to the right. The content inside of the header does span all the way however, which is really confusing to me. The only way I can get the header bar to span the entire width is by setting the position property to static, which is not what I need for this site, so that doesn't do me any good. Below is the CSS and HTML I am using. Could someone take a look at it and let me know what I am missing.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;div class="container"&gt;
  &lt;div class="header-content"&gt;
  ....Some Content goes in here....
  &lt;/div&gt; &lt;!-- /.header-container --&gt;
  &lt;/div&gt; &lt;!-- /.container --&gt;
  &lt;/div&gt; &lt;!-- /.header --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
  background-color: #949494;
  width: 100%;
  margin: 0px;
  padding: 0px;
  }
  
  .header {
  width: 100%;
  min-width: 100%;
  height: 200px;
  background-color: #ffffff;
  padding-top: 8px;
  }
  
  .container {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  }
  </code></pre>