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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Jeremiah Swift
Jeremiah Swift
3,277 Points
Posted by Jeremiah Swift
Jeremiah Swift
3,277 Points

Adjust the Profile Page and Header: float problems

In the responsive.css I formatted the nav element for the desktop (min-width: 660px) version of the site. The nav element does not seem to stay inside the header now. The portfolio, about and contact pages all seem to float around it on the left. Please advise, thank you. Jeremiah

Rendy Ho
Rendy Ho
2,452 Points
Rendy Ho
Rendy Ho
2,452 Points

Do You did it like this ? 

nav {
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }

CMIIW

Nick Nish
Nick Nish
7,304 Points
Nick Nish
Nick Nish
7,304 Points

Hey @Jeremiah if @Rendy's answer didn't clear things up could you post your code using the Markdown formatting? (If you're unfamiliar with the formatting look below the forum textbox and see Markdown Cheatsheet).

There could be a lot of reasons why your layout is breaking, and I want to give you the solution that fits your challenges and skillset for the timebeing.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jeremiah,

It sounds like your header is partially collapsing. In an earlier part of the project back in main.css the header was floated left.

Check your header rule in main.css and see if you have float: left

header {
    float:left;
   /* other styles */
}
Jeremiah Swift
Jeremiah Swift
3,277 Points
Jeremiah Swift
Jeremiah Swift
3,277 Points

I did the code exactly as the tutorial shows, but commented out the background to see what's going on:

nav { /* background: none;*/ float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

Here is the actual link to the workspace site: http://web-8wopf4kafh.treehouse-app.com/index.html

Jeremiah Swift
Jeremiah Swift
3,277 Points
Jeremiah Swift
Jeremiah Swift
3,277 Points

Jason, that worked. I had the left float commented out for some reason. Thanks!