Search code examples
htmlcssmenunavigationcenter

Centering a navigation menu

I've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.

Take a look at the website: Center Navigation

I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!

If someone could help me out that would be great, cheers

Current code:

.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;

}

li {
    display:inline-block;
}


<ul class="nav">
<li><a href="http://www.hannahallinson.com/">Home</a></li>
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li>
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li>
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li>
</ul>
Solution

  • Remove float: left; to .tabs .widget li, .tabs .widget li

    Try This:

    .tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}

    Instead of:

    .tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}