html - Cannot figure out how to center multiple links in a navigation bar using CSS -

html - Cannot figure out how to center multiple links in a navigation bar using CSS -

i'm trying center link 1, link 2, , link 3 in next page:

http://i.imgur.com/qnimzcs.png?1

here relevant bit of html:

<a class="logo" href="#"><p>logo</p></a> <ul class="nav"> <li><a class="link" href="#"><p>link 1</p></a></li> <li><a class="link" href="#"><p>link 2</p></a></li> <li><a class="link" href="#"><p>link 3</p></a></li> </ul>

and here's css:

.link { font-size: 1em; margin-left: 0; margin-right: 0; font-weight: none; text-decoration: none; color: #123456; display: inline-block; padding: 0 0; } .nav { margin-left: 0; display: inline-block; margin-bottom: 5px; margin-top: 5px; } .nav li { display: inline-block; margin: auto; }

i've tried every combination of things can think of.

to specific, i'm trying center links such evenly spaced out along nav bar. see i'm doing wrong?

edit:

jsfiddle link: http://jsfiddle.net/b362m/

try this:

.nav { display: inline-block; margin-left: 5%; margin-bottom: 5px; margin-top: 5px; text-align: center; }

working fiddle

html css web media-queries centering