title: Remove horizontal scroll bar on background div
body: <p>I am using the Supersized jquery plugin to create a slide show of background images and text. My problem is that I need my image to have a set with of 1200px. I have no problem creating the look I want, however, I cannot figure how to remove the horizontal scroll bar. </p>
  
  <p>Here is the site I am working on: <a href="http://atriaseniorliving.com/roslyntest/" rel="nofollow">http://atriaseniorliving.com/roslyntest/</a></p>
  
  <p>Here is the css:</p>
  
  <pre><code>#supersized {  
    display:block; 
    position:absolute; 
    left:50%; 
    top:38px; 
    margin-left:-600px; 
    overflow-x:hidden; 
    z-index:-999; 
    height:472px; 
    width:1200px; 
  }
  
  #supersized li {
    display: block;
    height: 472px;
    left: 0;
    list-style: none outside none;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -30;
  }
  </code></pre>
  
  <p>The only way I have figured out how to remove the scroll bar is to make the width:100% and then add a max-width:1200px. However, when I do that the background image then slides to the left when you decrease the browser width. </p>
  
  <p>Any help would be appreciated.</p>