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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Tiffany Sosa
Tiffany Sosa
2,599 Points

My nav and logo aren't floating properly in responsive.css when I enlarge the web page

5 Answers

Tony Nguyen
Tony Nguyen
24,934 Points

Your 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
Tiffany Sosa
2,599 Points

I 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.

Tiffany Sosa
Tiffany Sosa
2,599 Points

I 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.

Hi 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.

Tiffany,

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
Tony Nguyen
24,934 Points

Tiffany, 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.

Tony,

The navigation is using the <nav> element not a class of "nav"

Tony Nguyen
Tony Nguyen
24,934 Points

Hmm Don't know why but that fixed it for me. haha

I 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.