If you look at style.css 319 you will see a float. If you remove that float on that section and all of the others then this extra white background goes away.
So, how do I float these columns without adding that extra white background and in the case of the 4th column the extra light blue background?
I added overflow:hidden to #MainArea because the boxes inside were floated and floats need to be cleared in that way. It made no difference to the way your page was working. It’s just a routine thing to do that had been overlooked.
The problems were (1) the default margins on the paragraph <p> and (2) the header <h1>, plus (3) the negative margin on the image. Anytime you are tempted to use a negative top margin to lift an image or anything else, be sure you’re not forgetting the possibility of default margins under the box above it.
FYI, not on this page, but the default margins assigned to lists catch a lot of beginners off guard. Coders sometimes forget to take them into account. By default margins, I mean that lists, like paragraphs and headers, have default margin-top and margin-bottoms. It is common for coders to set those margins to zero in lists to avoid margin problems like you experienced here with the paragraphs and header.
When coding a page, you should always be aware of selectors that have default margins: ul, ol, p, h1, h2, h3, h4, h5, h6 and more.
And just to keep you on your toes, lists also have default padding-left that usually has to be set to zero when creating a horizontal menu.