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 Build Navigation with Unordered Lists

Posted by Brent Colson
Brent Colson
2,174 Points

Having trouble centering my nav on the Build Navigation with Unordered Lists. It remains a little off-center.

Hi, I am trying to get my navigation buttons center aligned on the page in my workspace, and I have done (i think) everything that the professor has but still no luck. Here is what I have in the CSS for my nav rules:

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

any idea?

Thanks Brent

Adna Zujo Lakisic
Adna Zujo Lakisic
2,294 Points

For centering you need to set margin: o auto;

Brent Colson
Brent Colson
2,174 Points

hmmm didn't seem to work with the margin: 0 auto;

i have pretty much copied what the prof has in this lesson but can't get the nav links to be centered on the page

5 Answers

James Kim
James Kim
8,475 Points
James Kim
James Kim
8,475 Points

You can try put text-align: center; into your nav ul like the code on the bottom...

nav ul{
    text-align: center;
    margin: 0 10px;
    padding: 0;
}

I also notice that you didn't have a colon for your padding as well.

Hope that works out for you.

Adna Zujo Lakisic
Adna Zujo Lakisic
2,294 Points
Adna Zujo Lakisic
Adna Zujo Lakisic
2,294 Points

For centering you need to set margin: o auto;

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

Make sure all padding and margins are set to zero.

I notice you're missing a colon in your padding: 0; declaration for your nav ul element. could be an issue.

A good way to work out what's going on is to give everything a border. That way you can see exactly what space each element is taking up on the page.

something like this. * is a universal selector. It selects everything.

* { border: 1px solid firebrick;}
Youssef Khalifa
Youssef Khalifa
1,084 Points
Youssef Khalifa
Youssef Khalifa
1,084 Points

I am also having trouble with my nav being slightly off center. My code is:

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

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

nav li {
  display: inline-block;
}
Youssef Khalifa
Youssef Khalifa
1,084 Points
Youssef Khalifa
Youssef Khalifa
1,084 Points

omg literally after posting this, I just realized I had "mav" instead of "nav". Nevermind! haha :)