title: CSS Horizontal Scroll?
body: <p>I'm trying to keep my page from having to horizontally scroll.</p>
  
  <p>When I add my navbar and header div to my page, everything works fine. However, when I add my content div it forces my page to scroll left and right. It's no wider than my header so why is this happening?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>body {
      min-width: 1024px;
      min-height: 700px;
      max-width: 1920px;
      max-height: 1080px;
  
      width: 100%;
      height: 100%;
  
      margin: 0 auto;
  
      background: url(/style/images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      &lt;!-- FOR IE --&gt;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
  }
  
  .overlay {
      width: 100%;
      height: 100%;
  
      -webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
       -moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
       box-shadow: inset 0 0 5px rgba(68,105,244,.45);
  
  
  }
  
  .divstyle {
      background-color: rgba(247,247,247,.9);
  
      -webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
      box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
  }
  
  #navbar {
      height: 50px;
      min-width: 1600px;
      width: 100%;
      margin-bottom: 50px;
  
  }
  
  #header {
      width: 1000px;
      height: 200px;
      margin: 0 auto;
      border-radius: 5px;
  }
  
  #content {
      width: 1000px;
      min-height: 500px;
      margin: 0 auto;
      margin-top: 25px;
      border-radius: 5px; 
  }
  </code></pre>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;div id="navbar" class="divstyle"&gt;
      &lt;div class="overlay"&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  
  &lt;div id="header" class="divstyle"&gt;
      &lt;div class="overlay"&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  
  &lt;div id="content" class="divstyle"&gt;
      &lt;div class="overlay"&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9mRHT/" rel="nofollow">http://jsfiddle.net/9mRHT/</a></p>