Stop header from moving on mouseover in IE7

Due to a bug in the way IE applies margins on hover the header grows and
shrinks a pixel on hover. This swaps out the margin for a padding which
fixes the moving. It also adds a negative margin to the bottom of the
logo to bring it back to the same height as the search box. Otherwise
the spacing looks strange.

This was discovered when looking at the possibility of merging: https://github.com/alphagov/static/pull/342