Something in my coding is stretching my page horizontally.

Question

I've just spent the last month or so designing a new layout for my website. I think it's about perfect, however, I've discovered that there's something stretching my site horizontally beyond the page width. I've searched through my code and I can't seem to figure out what it is. If you check out my test page, you'll see that there is a horizontal scrollbar at the bottom of the page and that you can scroll a bit to the right.

Can anyone out there help me figure out what's causing that?

Here's a link to my test page and my css file:

http://lifesgarbage.com/rebnation.html

Just replace the last bit with this for the css (I can't post more than one link).

/rebnationcss.css

Answer 1

It be the padding (left and right, 6px) on your top header (id is "top").

Answer 2

the padding on the #top is making the element larger than expected.

Answer 3

It´s the combination of width:100% and a padding > 0

By the way, you can just remove the width:100% as the div is a block element and it will stretch automatically to full width.