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

Posted by Su Strange
Su Strange
868 Points

Why does my navigation wrap round at a certain screen width?

My navigation on my website wraps at a certain screen width instead of switching cleanly between one style and another as shown on the image below.

http://imgur.com/apqK8E4

The navigation code in my main css is as follows:

/****************
NAVIGATION
*******************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

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

and in my responsive css looks like this:

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

Hope someone can help. Thanks

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

It likely has to do with setting the 'nav''s to width: 45%; as well as taking into account left and right spacing of nav elements. The 'nav' has margin-right: 5% and 'nav a' has left and right margin at 10px and 'nav ul li' has a left and right padding of 10px.

Those spaces or gaps between elements will affect your overall width, which is set to 45% of the nav's container. You could try adjusting some of these.

For example, the padding and margin on the 'nav a' and 'nav ul li', respectively, will probably give you a 40px gap between nav links -- from left to right for a nav link: 10px for 'nav ul li''s margin + 10px for 'nav a''s padding <nav link here> + 10px for 'nav a''s padding + 10px for 'nav ul li''s margin = 40px or 20px on each side of a nav link.