Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

James Barrett
James Barrett
13,253 Points

Why is there white space below my navigation (possible margin collapse)?

To avoid sending all my code over, I have taken a snapshot:

https://w.trhou.se/nagojsdtqy

I am have completed this challenge however I am noticing white space below my navigation bar at the top. When I inspect it, no element is shown!

I believe this may have something to do with collapsing margins, however I am not sure how to fix it.

Thanks, James.

1 Answer

Kevin Korte
Kevin Korte
28,148 Points

Your main container is completely collapsed because it only contains floating children. You were close, in that you added a clearfix class to the container div, but you didn't actually set the clearfix class to do anything in CSS.

If you deploy the clearfix css, it'll work fine. Right now it's the footer that is pushing up into this space, and the footer's margin is creating the white space.

Here is the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/

James Barrett
James Barrett
13,253 Points

I made a mistake. I used the screenshot feature BEFORE I applied the clearfix. If you view the webpage with the clearfix applied, you will be able to see the space underneath the the navigation, any suggestions? :)