Remove horizontal scroll bar on background div

Question

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.

Here is the site I am working on: http://atriaseniorliving.com/roslyntest/

Here is the css:

#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;
}

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.

Any help would be appreciated.

Answer 1

Ok, I believe I figured out the solution. I needed to add a container div around the #supersized ul and set that to overflow: hidden.