My "About" and "Contact" pages do not have any white space between the colored heading and the body.

You are getting some really bizarre behavior on your site.

You should be able to choose the wrapper ID and, give it a margin top of some amount to give it space but, it adds the white space above the header even though the wrapper doesn't include the header.

In reverse I tried targeting the header and giving it a margin bottom but it does nothing.

The only way I can fix it is by changing the padding within the wrapper ID to 15-20% however much space you would like to see.

Just to note as I'm still playing with it, you need to change your class="selected" on the about.html to the correct <li> tag

I have been fiddling around and, it seems that most of the problem is because you declared your header a float when it isn't actually floating. This should fix it.

header {
/*  float: left;*/
  display: block;
  margin 0 auto 50px;
  padding: 25px;
  width: 100%;
  height: 175px;

}