Centering a <ul> using CSS - html

Question

I have some navigation links at the top of the page that I am having trouble placing in the centre of the screen. Can anybody suggest where I'm going wrong in the CSS?
Image:
http://i.imgur.com/SUTWr.png
Here's the CSS:
#nav {
list-style-type:none;
text-align:center
}
ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}
li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Thanks

Answer 1

Hi actually i have updated your css now i hope this work will for you :-
DEMO
CSS
#nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #B8B8B8;
height: 400px;
list-style-type: none;
margin: auto;
padding: 40px 0;
width: 400px;
}
ul li {
display:inline;
}
li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}

Answer 2

Here's a quick demo of how to center a UL: http://jsfiddle.net/73Mum/1/
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
.wrap {
text-align:center;
background:#999;
padding:100px 0;
}
ul {
width:500px;
margin:0 auto;
}
ul li {
display:inline-block;
padding:10px;
background:#ccc;
}

Answer 3

Try wrapping these <ul>-tags with a <div style="margin-left: auto; margin-right: auto">.
This way you center all <ul>-tags at once.
If "1,2,3,4,5" in your picture are the ul-elements and #nav is the id of your surrounding div, you can just add margin-left: auto; margin-right: auto to #nav in your stylesheet.