That is expected behavior; applying margin doesn’t change the width of an element when it has a specified width. The best way to solve your problem would be to remove the specified width, and stop floating the element. Instead, use the clear property (i.e. clear: left;).
I’d add a 1em padding to the footerwrapper element, them remove left and right margins on its children.
This way, you’re sure everything is right. Plus, if some day you want to change this 1em value to 2em, you have only one line to change.