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 Brian Joseph
Brian Joseph
309 Points

Center My Nav Bar

How Can I Center My Nav Bar Here is my CSS Code.

body{ font-family: Oswald; font-size: 20px;}

  • { margin: 0; padding: 0; }

ul {

list-style-type: none; text-align: inherit; margin: 0 auto;

}

li { height: 25px; float: left; margin-right: 0px; border-right: 1px solid #aaa; padding: 0 20px; }

li:last-child { border-right: none; }

li a { text-decoration: none; color: #ccc; text-transform: uppercase;

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

li a:hover { color: #23b2fd; }

li.active a { font-weight: bold; color: #333; }

3 Answers

bleedcmyk
bleedcmyk
5,945 Points

You want to use;

Margin: 0 auto;

on the container.

This gives you 0 top and bottom margin, but it auto-measures the left and right margins equally which aligns your div into the center.

Here is a codepen:

http://codepen.io/anon/pen/dPNZqd

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Hiya mate you need to center the unordered list or alternatively not sure what your html looks like but you could center the container the navigation bar is in like so 

ul  {
     text-align: center;
}

In the container i was mentioning

<div class="container">
  <header>
     <nav>
           <ul><!-- List items here --></ul>
     </nav>
  </header>
</div>

The css

.container {

    width: 800px;
    margin: 0 auto;

}

nav {
     width: 100%;
     margin: 0 auto;
     text-align: center;
}

Hope this helps need anymore clarification just ask :)

Brian Joseph
Brian Joseph
309 Points

i can send you my html if you would like maybe it will help you understand my question and look at all my code a little better.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

You can copy and paste your code

Brian Joseph
Brian Joseph
309 Points
Brian Joseph
Brian Joseph
309 Points

hey Tunde your code did it prefect.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

No worries mate