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.

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

Jeremiah Swift
Jeremiah Swift
3,267 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

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

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

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,267 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,267 Points

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