I've come across this problem before, and I'm sure the solution will be stultifyingly simple to fix, but I can't for the life of me remember which rule I need to change to stop the horizontal scrollbar appearing along the bottom like this, and right now I'm reduced to laboriously switching on and off every rule in this stylesheet to resolve this display bug.
Why would this scrollbar be appearing?
I can't understand the logic that would make it appear at all.
It appears to be to do with the negative right margins, which are making the computed width of the centered container div (plus its auto margins) wider than the body - at whatever browser window size.
I can't work out why you've used such a complex method to create a two column layout, why not just float the main content left and the sidebar right.
I think you'll need to strip down the css to a simpler test case before you'll get to the bottom of it.