firefox - newbie to treehouse

The Teacher's Notes does contain the fix for this but it is specific to this firefox problem.

There is a more general problem though with the floated header that happens on both firefox and chrome. Since the floated header is never cleared, the content boxes for the wrapper div, <section>, and whatever the first child of section is, all extend to the top of the header. So if any of those 3 elements have a top margin it will produce a gap above the header.

The wrapper div should clear the floated header since its the first element after the header.

clear: both should be added to the existing #wrapper rule:

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    clear: both;
}

This drops the content box for the wrapper div down below the header. Now any top margins on the 3 previously mentioned elements will not produce a gap above the header.

This also prevents the firefox profile photo problem from happening and the correction James linked to wouldn't be needed.