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

Cristy Balch
Cristy Balch
780 Points
Posted by Cristy Balch
Cristy Balch
780 Points

My navigation isn't lining up correctly. "Contact" is appearing underneath "About."

This is the code I did on my responsive.css page: nav {

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

5 Answers

Katelyn Morris
Katelyn Morris
3,443 Points

Awesome! I added the code above to into a codepen and it looks like your width: 45% is throwing off your menu when you start shrinking it down. The menu items will still stack on top of each other on mobile, but if you change your width to 100% it will only start stacking on mobile sizes.

Cristy Balch
Cristy Balch
780 Points
Cristy Balch
Cristy Balch
780 Points

Thank you Katelyn!

Steef Vendy
Steef Vendy
9,436 Points
Steef Vendy
Steef Vendy
9,436 Points

Hi Katelyn, I am having the same problem with my nav, I changed the width to 100% as suggested but then my header nav become higher which not what i want. any solution to keep my nav the same height but the menu items do not stack?

Silas Lane
Silas Lane
6,537 Points
Silas Lane
Silas Lane
6,537 Points

Hey Cristy! I was having the same issue until I changed the navigation width to 50% and the logo width to 40%. Hope this helps!

Saman Rashidi
Saman Rashidi
11,007 Points
Saman Rashidi
Saman Rashidi
11,007 Points

Hi guys, I had the same problem and went to main.css and changed the nav a { font-weight: 800; padding: 15px 10px; <---------------------------- }

to

nav a { font-weight: 800; padding: 15% 10%; <---------------------------- }

I had used px instead of % for padding. anyway it solved my problem.

cheers

Katelyn Morris
Katelyn Morris
3,443 Points
Katelyn Morris
Katelyn Morris
3,443 Points

Could you post your html as well? I think maybe the problem is that your container for the nav is to small to fit all of the individual menu items.

Cristy Balch
Cristy Balch
780 Points
Cristy Balch
Cristy Balch
780 Points

This is the html: ''' <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> ''' This is the css on my main.css: ''' nav { text-align: center; padding 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

'''