title: Prevent horizontal scroll bars on page container
body: <p>I'm using a 960px fixed width container for my site.</p>
  
  <p>However, I'd like to add a wrapper that adds a box shadow to the page and increased the size of the left/right margins.</p>
  
  <p>You can see the desired effect at <a href="http://jsfiddle.net/2QqxB/5/embedded/result/" rel="nofollow">http://jsfiddle.net/2QqxB/5/embedded/result/</a>.</p>
  
  <p>The problem is that at 1024 x 768 I get a horizontal scroll bar as the wrapper is 1020px.</p>
  
  <p>So how can I achieve the same effect, without using a background image and without a horizontal scroll bar.</p>
  
  <p>Code (also at <a href="http://jsfiddle.net/2QqxB/5/" rel="nofollow">http://jsfiddle.net/2QqxB/5/</a>):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div id="container"&gt;
          &lt;p&gt;
              Lorem ipsum dolor sit amet...
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
   height: 100%;   
  }
  
  body {
   background-color: #f3a450;   
  }
  
  #wrap {
   width: 1020px;
   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.4);
   margin: 0 auto;
   min-height: 100%;
   background-color: #fff;
  }
  
  #container {
   width: 960px;
   margin: 0 auto;
  }
  </code></pre>