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 Styling Web Pages and Navigation Polish the Navigation and Footer

Jimmy Mannan
Jimmy Mannan
5,201 Points
Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

How to Space out links across the nav bar?

I have four links in the nav bar and they are spaced out across the nav bar when viewing through small screen size(for mobile) but with desktop viewing, they seem centered in the middle and not spaced out across the bar.

If I increase the padding or margin, the links space out across the width of the nav bar as I want for desktop size but take two lines when viewing in mobile.

Is there any way that the links:

  1. stay in one line 2.spread across the nav bar for all screen size.

screenshots: for desktop alt text

for mobile alt text

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points 
nav {
text-align: center;
margin: 20px 0 0 ;
padding: 10px 0;
}

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

nav li {
   display: inline-block;
   padding: 5px 5px;
}

nav a {
  font-weight: normal;
  padding: 10px 5px;
  font-size: .80em;
}

7 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Jimmy Mannan,

My go-to technique for centering elements is flexbox. CSS Beyond the Basics starts off talking about this and may provide the help you're looking for.

The tl;dr version is that a parent element can be made into a flex box with display: flex and it's direct children will be flex items. Without seeing all your code this is just theory, and you'll need to experiment. The first thing I'd try is this:

nav ul{
  list-style: none;
  margin: 0 2px;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

Here is a CSS-Tricks article on flexbox that I often reference.

This isn't the only way to go about centering content - it's just my favorite way. Please let me know if this helps or not.

Cheers!

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Thanks a ton Robert!! Got what I wanted plus lots of additional tricks too...

Have a great day!

Joshua Todd
Joshua Todd
1,167 Points
Joshua Todd
Joshua Todd
1,167 Points

Man you just fixed all my problems

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

hey ! try to float your nav bar to the right and your logo to the left, while clearing both sides.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points 
/* this includes your ul */
  nav { 
    background : none;
    float:right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align:right;
    width:45%;

  }

/* this is to float your logo ( if you have it ) to the right */
   #logo {
    float:left;
    margin-left:5%;
    text-align:left;
    width:45%;
  }
Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Thanks Ayoub for your reply... I have added screenshots now to explain myself better. I think my query wasnt very clear.

The nav bar has to stay for the entire width of the screen and I want the links to spread out too instead of clustering in the centre as they are for the desktop size.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

so, if I understand, you want the nav bar, on the desktop version, to be aligned on the right of the screen and not in the middle, right ?

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

No I want them evenly spread out across the width of the bar...In the mobile version they are covering the entire width but in the desktop version they are clustered in the center..i want them to space out so they are covering the entire nav bar like this (done in photoshop): alt text

thanks for your time Ayoub

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

give your html header please !

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Thanks Ayoub..

Robert's answer above solved the issue.

Have a good day!

samanthametcalfe2
samanthametcalfe2
5,820 Points
samanthametcalfe2
samanthametcalfe2
5,820 Points 
nav ul {
    padding:0;
    display: flex;
    justify-content: space-around;
    border:1px solid white;

    }   

nav ul li {
    border-left:1px solid white;
    list-style-type:none;
    padding:10px;
    width:100%;                                   /*this is the line that helped me get rid of the white space at the start of my nav */
    }
nav ul li a {
    text-decoration:none;
    }