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
Leo Marco Corpuz
18,975 PointsMy clearfix isn't working
Am I applying my clearfix correctly? The banner background is still hiding the navigation list elements and the footer background is covering the three columns.
1 Answer
Steven Parker
231,236 PointsIt looks like you skipped the step demonstrated about 20 seconds into the video where the "float" property is applied to the ".col" class. This places the columns side-by-side.
The nav items appear in reverse order because the "float: right" property setting is applied directly to the list items. In the videos, that property is applied to the "`.main-nav" class instead.
Leo Marco Corpuz
18,975 PointsSo I applied the float:left to the col class, but the footer container is overlapping the columns .I applied the float:left to the main-nav class but they're stacked on top of each other. I tried setting the display to inline but that didn't do anything.
Steven Parker
231,236 PointsI don't remember offhand how this is done in the video, but one quick way to solve the footer overlap would be to apply the clearfix to the container div on line 27:
<div class="container clearfix">
Leo Marco Corpuz
18,975 PointsThanks, the footer overlap is fixed.I still need to figure out how to get the navigation list items inline and in the right order.
Steven Parker
231,236 PointsAs I said before, move the "float: right" from the list items (".main-nav li") and put it instead directly on the .main-nav the way it is in the video.
Leo Marco Corpuz
18,975 PointsLeo Marco Corpuz
18,975 PointsHere's my updated code, what I need to know is how to get the columns side by side, I think I've tried adding an inline display to the col class but it didn't work. Also I'm wondering how to reverse the order of the nav list items.
https://w.trhou.se/5ylse4hnon