Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,109 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? :)