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 Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

centering the navigation links

l am trying to get my navigation links to be centred in the middle of the navigation bar but struggling a bit. My css and html code is below if anyone can help me thats gunna be great and thanks in advance. l have tried removing the float and replacing it with margin: 0 auto but thats not working either.

<nav id="site-navigation" class="main-navigation clear" role="navigation">
                    <h1 class="menu-toggle"><a href="#">Menu</a></h1>

            <div class="menu-main-manu-container"><ul id="menu-main-manu" class="menu"><li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="">Home</a></li>
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-236 current_page_item menu-item-241"><a href="">About Us</a></li>
<li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="">Ricky</a></li>
<li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-242"><a href="">Contact</a></li>
</ul></div>


        </nav>

.main-navigation {
position: relative;
display: block;
width: 100%;
height: 80px;
clear: both;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
background: #ccc;
}

.menu-toggle {
display: none;
cursor: pointer;
}
.main-navigation ul {
margin: 0;
padding-left: 0;
list-style: none;
}

.main-navigation li {
position: relative;
float: left;
}

5 Answers

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

How about this...

.main-navigation {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    background: #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.main-navigation li{
    display:inline;
}
.main-navigation a{
    display:inline-block;
    padding:10px;
}

.menu-toggle {
   display: none;
   cursor: pointer;
}
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

dont sem to work either :(

Tom Schinler
Tom Schinler
21,052 Points
Tom Schinler
Tom Schinler
21,052 Points

You tried 

Margin: 0, auto;

but that would center vertically of the nav bar. Try:

Margin: auto;
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

that dont seem to work either

Andrew Claytor
Andrew Claytor
6,637 Points
Andrew Claytor
Andrew Claytor
6,637 Points

try digging deeper into the li element. Try .main_navigation li a {style}

Umar A
Umar A
4,041 Points
Umar A
Umar A
4,041 Points

Hi Kelvin Atawura

If you want to center the navigation in the middle of the page, first replace float: left with display: inline-block like this

.main-navigation li {
display: inline-block;
}

Then, center the text in the ul like this:

.main-navigation ul {
    text-align: center;
}

I hope it works for you :+1:

Kelvin Atawura
seal-mask
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

l finally got a code that works but then its tempering with my reponsive menu on small screens any ideas how l can fixe that?

nav {text-align:center;}
.main-navigation li {
float: left;

} 
.main-navigation ul {

  list-style-type: none;
  overflow: hidden;
  display: inline-block;
}
Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

solved that with a plugin. thanks for all the help guys