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 trialBrent Colson
2,174 PointsHaving 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
Brent Colson
2,174 Pointshmmm 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
8,475 PointsYou 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
2,294 PointsFor centering you need to set margin: o auto;
Pete Cass
16,656 PointsMake 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
1,084 PointsI 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
1,084 Pointsomg literally after posting this, I just realized I had "mav" instead of "nav". Nevermind! haha :)
Adna Zujo Lakisic
2,294 PointsAdna Zujo Lakisic
2,294 PointsFor centering you need to set margin: o auto;