Assignment 8: Fluid Grid Layout

You page really looks beautiful. Your graphics are outstanding. The page is resizing well, too.

I did not figure out what was causing the gap between your header and nav sections, but I do know how to fix it. It's by putting the image in as a background image, and sizing the .imgWrap div around it so that it's flexible. You have to remove the image as a foreground image. Then make this rule for the imgWrap div:
.imgWrap {
width:100%;
height:0;
padding-bottom:16.7%;
background: url(images/unit_8_header.jpg) no-repeat;
background-size: 100% 100%;
}
The 16.7% figure for the padding on the div is the proportion of your background image's height to its width. If you do this, you'll see that the background image stays in proportion and adjusts to the size of the window.

I don't see the gap between your columns that you talked about. Maybe because you don't have different background colors, so I can't address that. You could try the box-sizing property with border-box as the value. That might make calculations simpler for the browsers, as well as yourself.