Padding Between Header / Content / Footer

Try this.

Find the following code in your Twenty Eleven style.css file and remove it.

#page {
    background: #fff;
}

Then add the following

#main{
    background-color: #ffffff;
    overflow: hidden;
}

footer{
    margin-top: 20px;
}

Find the following code in your Twenty Eleven style.css file and remove it.

No! Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Make changes in the Create a child theme only. Try adding:

#page {background:transparent;}
#main{
    background-color: #ffffff;
    overflow: hidden;
}
footer{margin-top: 20px;}

Apologies.

esmi’s solution is better.

fantastic! thank you both for solving that little conundrum. One question however; how do you adjust the margin between the header / content?

I suggest that you try using Firefox with the Firebug add-on for this kind of CSS work.

Thanks for the advice, I have installed Firebug now. Any chance I could get an answer to the above question?

You should now be able to locate the CSS you need to amend by adding the relevant rule to your child’s stylesheet.