Why is my page overflowing on the right?

I'm using a variation of Matthew James Taylor's Holy Grail 3-column liquid layout. It was working perfectly for me when my doctype was XHTML. When I transitioned to HTML5, however, it started overflowing to the right. The visible area stil开发者_如何学编程l renders fine, but the browser shows a horizontal scroll bar when it shouldn't and there's excess whitespace to the right of the page.

My web site is here: Western Wake Farmers' Market | Link to CSS

Any insights as to how I can fix this?

Your #header ul style specifies 100% width and 22 ems of padding on the left.

Padding applies in addition to content width, so you're making that ul 22 ems bigger than the width of the page, and it has to scroll over.

Why it happened - I have no idea, and I'm not going to look at it unless you ask me to.

The ul inside #header is too wide, thanks to the combination of width: 100%, and (as @zerocrates stated before I did), the padding.

How to fix it:

• Remove width: 100% from ul inside #header.
• If that somehow breaks something, another way to fix it is to add overflow: hidden to #header.