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.

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

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
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

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

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

Man you just fixed all my problems

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

/* 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

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.

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

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

give your html header please !

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
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;
    }