You may find the header or footer background color doesn’t reach as far as it should. For example, in this screenshot the white background (of the <header> element) should extend all the way to the top of the page.

Problem code

<header>
  <p><img src="images/globeLogo.jpg"></p>
</header>

The reason this appears to not be working is because there is (by default) top and bottom margin on <p> tags. So, the gap at the top of the screen is there intentionally—that is the margin doing its job of spacing block-level elements away from each other.

Solution 1—Convert the margin to padding.

This is done be removing the 1em margin from the <p> tag and creating a 1em top padding on the containing element.

<header style="padding-top:1em">
  <p style="margin-top:0">
     <img src="images/globeLogo.jpg"></p>
</header>

Solution 2—Set overflow:auto

This is now my preferred method. Set the overflow property to anything other than visible. This will make the block extend itself to contain its childrens’ margins and any floated items.

<header style="overflow:auto;">  <!-- or overflow:hidden -->
  <p><img src="images/globeLogo.jpg"></p>
</header>