Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px;
set in many of the elements on your page, but not on html
, body
, or .container
. Once the viewport is smaller than this, these elements will overflow html
and give you the scrollbars you're seeing.
But this doesn't make html
any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100%
on html
doesn't fix this; this only sets html
to 100% width of the browser window. If you're going to use min-width
, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.