Centering Menu Bar CSS/HTML - html

Question

I am designing a website, but having issues getting the menu bar to center correctly. I have done a lot of research on the web, but can't seem to figure it out. Any suggestions?
Thanks!
The html code that deals with links.
<nav>
<ul>
<li>Home</li>
<li>Shorthorn Herdsires</li>
<li>Shorthorn Cows</li>
<li>Hereford Herdsires</li>
<li>Bull Sale</li>
<li>Cow Sale</li>
<li>History</li>
<li>Contact</li>
</ul>
</nav>
This is my css style sheet.
nav{
display: block;
width: 100%;
overflow: hidden;
}
nav ul {
padding: .7em;
float: left;
list-style: none;
background: #a4d25d;
box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset;
border: 3px solid black;
/* added*/
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em .7em;
text-decoration: none;
color: black;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #black #BF7530;
background: #FF8700;
}
nav a:hover, nav a:focus {
outline: 0;
color: #black;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #FFDB73;
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}

Answer 1

Here one solution to center your menu :
http://codepen.io/anon/pen/BuqlA/
nav{
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}
nav ul {
padding: .7em;
list-style: none;
background: #a4d25d;
box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset;
border: 3px solid black;
display: inline-block;
}

Answer 2

Here's another possibility, depending on exactly what you are looking for.
This uses display:inline-block for the a and li elements.
http://jsfiddle.net/jdWgE/

Answer 3

You can use aplying display: inline-block; to the <ul> with text-align: center; to the parent, like this:
nav{
text-align: center;
}
nav ul {
display: inline-block;
}
Hope it is that what you need
DEMO here: http://jsfiddle.net/verber/fENS4/4/

Answer 4

If you don't mind supporting only modern browsers that recognize and support the flexbox specification, you can use that to your advantage. You only need to change the styles for nav and nav ul:
nav{
width: 100%;
display: flex;
justify-content: center;
}
nav ul {
padding: .7em;
display: block;
overflow: hidden;
list-style: none;
background: #a4d25d;
box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset;
border: 3px solid black
}
The trick is to set <nav> to use flexbox display, and instruct it to justify its content to the middle/center. I have removed the float: left declaration for the list because that is not needed.
http://jsfiddle.net/teddyrised/z6KVk/