Question

Probably something simple, but I’m pulling my hair out:

Site in question here: dev.sauceboxcreative.com/karenpool/

I’m getting horizontal scrollbars (even when window is much wider than content), and can’t seem to get rid of them. Each/all of the block-level elements are set to 960px or less (wide), but browsers (FF, Safari, Chrome, all on Mac) show scrollbars at anything less than a viewport size of 1200px or so. Overflow-x (hidden) works at the wider resolutions, but won’t allow narrow viewports.

Webkit inspector shows the computed style of the body tag to be 1096px, and I cannot seem to figure out why. Every other tag is computed to be what is set in the CSS (either 960 or 940px, depending on where it appears in the markup).

Answer 1

Consider removing line 469 from your serenity/style.css which assigns a width of 100% to your #subnav ul. I found this by giving everything a border of 1px with this code:

* {
    border: 1px solid red;
}

and seeing what bled past the sides.