Centering navigation menu

I am trying to align the menu navigation to the center of my site (https://www.asindexed.com).
I have tried
margin: 0 auto 0 auto; white-space: nowrap;
but the menus just stick to the left. How can I get it to center as the header does!?

Here is the css from the stylesheet:

.nav {vertical-align: baseline; float: left; margin-left: 15px; position: relative; z-index: 100;}
.nav li {height: 40px; float: left; padding: 0 15px 11px 0; background: url("i/post_list.gif") -14px 50px no-repeat;}
.nav li.current a {color: #f2f2f2;}
.nav a {color: #ccc; font-size: 16px; font-weight: bold; text-decoration: none; padding-top: 20px; display: block;}
.nav a:hover, .nav li.current a:hover, .jsddm_hover a, .sub-menu li a:hover {color: #fff18f;}

I would also like the content (featured posts – square images on front page) to center as well but am experiencing the same problem. Here is the css for that element:

.middle {padding: 0 15px 61px 0;}
.container {padding-bottom: 100px;}
.content {width: 785px; float: right;} 

#show {width: 785px; overflow: hidden; margin-bottom: 10px;}
#show img {cursor: pointer;}
#show_nav a {font-size: 11px; color: #b8b8b8; text-decoration: none; margin-right: 10px;}
#show_nav a:hover, #show_nav .activeSlide {color: #fff18f;}

.post_home {width: 145px; float: left; margin: 0 0 30px 15px;}
.thumb {display: block; width: 145px; height: 145px; margin-bottom: 5px; position: relative; color: #333;}
.thumb img {display: block;}
.thumb span {display: block; width: 145px; height: 145px; position: absolute; top: 0; left: 0; background: #fcf2ad;}
.post_home h2 {font-size: 11px; font-weight: bold;}
.post_home h2 a {color: #ccc; text-decoration: none;}
.post_home h2 a:hover {color: #fff18f;}

Thank you for any advice.