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
Tiffany Sosa
2,599 PointsMy nav and logo aren't floating properly in responsive.css when I enlarge the web page
5 Answers
Tony Nguyen
24,934 PointsYour nav below the header is either missing a class or an id before it. For example .nav or #nav. Check your HTML to see which.
Tiffany Sosa
2,599 PointsI just checked the original html code from the video and, unless I'm missing the smallest thing somehow, it's exactly the same. Could it be anything else? I uploaded all of my code in codepen.
Jason Anello
Courses Plus Student 94,610 PointsHi Tiffany,
In the project, the header is floated left which is one way to get a parent to contain its floated children.
I wasn't seeing that in your codepen. Once I added it the header seemed to be looking right.
header {
float: left;
}
Not sure if you lost that at some point?
Is the logo supposed to be to the left and the nav to the right? The logo is there but it's white text on a white background because the header isn't containing it's floated children.
Jason Anello
Courses Plus Student 94,610 PointsTiffany,
I see where you might have lost the float: left
On line 98 in your codepen css you have float; left; You have a semi-colon after float.
Fix that and you should be fine. Initially I thought you were missing it because I was only looking at the css in firebug and saw that it was missing. Now I see that you do have it in there but it was missing because the browser ignored it.
Tony Nguyen
24,934 PointsTiffany, if you're still confused from my answer, all you have to do is add a period before your nav because that's all you're missing. Like so.
.nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
"."nav is all you're missing.
Jason Anello
Courses Plus Student 94,610 PointsTony,
The navigation is using the <nav> element not a class of "nav"
Tony Nguyen
24,934 PointsHmm Don't know why but that fixed it for me. haha
Jason Anello
Courses Plus Student 94,610 PointsI think it might look that way because by doing .nav you're effectively not applying those styles because .nav doesn't select anything. So the nav is no longer floated to the right which means the header will expand to contain the navigation but it won't expand all the way to contain the floated logo.
You do see the name in the logo but you don't see the text "Web Developer" that is underneath the name.
Tiffany Sosa
2,599 PointsTiffany Sosa
2,599 PointsI just checked the original html code from the video and, unless I'm missing the smallest thing somehow, it's exactly the same. Could it be anything else? I uploaded all of my code in codepen.