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

My Nav-items and Logo "fall" out of the header space into the page space when 660px min-width.

The other modifications work just fine:The green border stripe is sitting above the Logo and Navigation items - the left-right floating and font sizes work.

Please post the HTML and CSS. The Markdown Cheatsheet link on this page shows how to format your code.

Sorry, but what do you mean by "post the HTML and CSS" - I looked at the markdown Cheat sheet but it didn't help me at all - format which code?

You would copy and paste the code here with the formatting before and after according to the Markdown Cheatsheet. But what may work better is to post the snapshot of the workspace. To do that, open the workspace and click the camera icon in the upper right corner. Create and open the snapshot. Copy the URL and post it here. We can then open your project and see what is happening. I think it is something called margin collapse, but I don't remember that happening at this stage of the project. I need to see and play with the code some to tell you for sure.

https://w.trhou.se/erc7l8ocif - this is the URL from the snapshot I took. Thanks for your explanation of how to go about it, I appreciate it.

4 Answers

The problem you are having is called margin collapse. It is a known property in CSS that is usually good, but can cause issues like this. There are Treehouse courses that discuss the problem. I think it may be addressed in your course in the next few videos. Add this code block to your responsive.css file after the header styling:

header:after {
  content:"";
  display:table;
  clear:both;
  }

This is known as clearfix and should be kept in your bag of tricks because it comes up often in my experience. Here is an article that explains the issue in detail.

Keep coding.

Thank you!!

You are welcome.

Rishit Shah
Rishit Shah
4,975 Points

try adding the following code to your responsive.css

@media screen and (min-width: 660px) {
nav { overflow:hidden; } }

Thank you for your help - unfortunately that code didn't solve the problem. But I got the problem fixed.

Jan Chalupa
Jan Chalupa
3,323 Points

And how did you fixed that problem imke melles? My problem is that the Contact link fall down below About link. And that clearfix didn't help.

For me adding

header:after { content: ""; display: table; clear: both; }

after the last header styling of the 660px modifications in the responsive.css worked.

Is anyone else having the problem of the nav "wrapping" with contact falling underneath About? This seems to occur for only at a width of 661px to 668px then it seems to go back inline..

Please post a Workspace snapshot. I recommend a new forum post and tag me in the post. You can do that by typing my name in [] and copying and pasting the hyperlink url in my name here and enclosing it with () with no spaces between the ] and ( like this ](

I am not sure what you are seeing, so I cannot help with just your post.