Transparent header and navigation

I am trying to figure out how to make the header and navigation area transparent, while keeping a white background for the main content area and widget area.

First I made the whole body transparent by doing:

body .site { background-color: transparent; }

And then I put the white background back into the content and widget area with this:

.wrapper { background-color: #fff; }

However, the padding around the wrapper is still transparent, which looks really awkward as the text in the content area is lined right up against the edge of white background. Can anybody help me fix this? Hopefully my description makes sense.