Web Navigation Bar Will Not Center - html

Question

Trying to get the words in my navigation bar to center. I have tried a bunch of different configs that I found online and so far no luck.
Also, is there anything I can do to make the navigation bar appear cleaner and more professional?
Thank you in advance
<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><span>Home</li>
<li><span>Why Soy?</li>
<li><span>Candle Sold, Tree Planted</li>
<li><span>Build-a-Candle</li>
<li><span>Contact Us</li>
<li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products">
<span>Buy Products</span>
<ul class="level0">
<?php echo $_menu ?>
</ul>
</a>
</li>
</ul>
/*** CLEARFIX ******/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
/********** < Navigation */
.nav-container {clear: both; width:100%; float: left; text-align: center; margin: 10px 0px 10px; text-transform: uppercase; font-weight: bold; display: inline; background:#d4dadd !important; box-shadow: 10px 10px 5px #888888 !important; }
#nav { margin:0 auto; padding:0; font-size:12px; }
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li {
display: inline-block;
padding: 5px;
margin: 5px;
border-right: 1px solid #000;
list-style: none;
vertical-align: top;
height: 50px;
position:relative;
}
#nav li.over { z-index:998; background-color: #b3bec3; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; padding: 10px;
text-align: center; }
#nav span { display:block; cursor:pointer; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a {}
#nav ul li.parent li a { background-image:none; }
#nav a.category span { background: url(../images/nav-category.gif) no-repeat center right; padding-right: 20px; }
/* 0 Level */
#nav li.active a { color:#2882ce; }
#nav a { font-size: 115%; color:#303030; }
#nav li.last a { padding-right: 0px !important;}
#nav li.over a,
#nav a:hover { color:#2882ce; }
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#d4dadd; }
#nav ul li.last { background:#d4dadd; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-size: 100% !important; font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:27px; left:-10000px; border:1px solid #899ba5; }
#nav div ul { position:static; width:auto; border:none; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { background:#d4dadd; }
#nav ul li a:hover { background:#b3bec3; }
#nav ul li a,
#nav ul li a:hover { color:#2f2f2f !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:0; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><span>Home</li>
<li><span>Why Soy?</li>
<li><span>Candle Sold, Tree Planted</li>
<li><span>Build-a-Candle</li>
<li><span>Contact Us</li>
<li><a class="category" href="<?php echo Mage::getBaseUrl(); ?>all-products">
<span>Buy Products</span>
<ul class="level0">
<?php echo $_menu ?>
</ul>
</a>
</li>
</ul>

Answer 1

I changed your code a bit, here is a snippet below, to see this snippet working click Full Page button.
UPDATED snippet based on OP's Comments to answer.
/*** CLEARFIX ******/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
/********** < Navigation */
.nav-container {
clear: both;
width: 100%;
float: left;
margin: 10px 0px 10px;
text-transform: uppercase;
font-weight: bold;
display: inline;
background: #ecf3f6 !important;
box-shadow: 10px 10px 5px #888888 !important;
}
#nav {
margin: 0 auto;
padding: 0;
font-size: 12px;
}
/* All Levels */
/* Style consistent throughout all nav levels */
#nav li {
display: inline-block;
margin: 5px 0;
border-right: 1px solid #000;
list-style: none;
vertical-align: top;
height: 70px;
width:16.3%
}
#nav li:last-child {
border-right: 0
}
#nav li.over {
z-index: 998;
background-color: #d4dadd;
}
#nav a,
#nav a:hover {
display: block;
line-height: 1.3em;
text-decoration: none;
padding: 10px;
text-align: center
}
#nav span {
display: block;
cursor: pointer
}
#nav li ul span {
white-space: normal;
}
#nav ul li.parent a {} #nav ul li.parent li a {
background-image: none;
}
#nav a.category span {
background: url(../images/nav-category.gif) no-repeat center right;
padding-right: 20px;
}
/* 0 Level */
#nav li.active a {
color: #2882ce;
}
#nav a {
font-size: 115%;
color: #303030;
}
#nav li.last a {
padding-right: 0px !important;
}
#nav li.over a,
#nav a:hover {
color: #2882ce;
}
/* 1st Level */
#nav ul li,
#nav ul li.active {
float: none;
margin: 0;
padding-bottom: 1px;
background: #ecf3f6;
}
#nav ul li.last {
background: #ecf3f6;
padding-bottom: 0;
}
#nav ul a,
#nav ul a:hover {
float: none;
padding: 0;
background: none;
}
#nav ul li a {
font-size: 100% !important;
font-weight: normal !important;
}
/* 2nd Level */
#nav ul,
#nav div {
position: absolute;
width: 15em;
top: 27px;
left: -10000px;
border: 1px solid #899ba5;
}
#nav div ul {
position: static;
width: auto;
border: none;
}
/* 3rd+ Level */
#nav ul ul,
#nav ul div {
top: 5px;
}
#nav ul li a {
background: #ecf3f6;
}
#nav ul li a:hover {
background: #d5e4eb;
}
#nav ul li a,
#nav ul li a:hover {
color: #2f2f2f !important;
}
#nav ul span,
#nav ul li.last li span {
padding: 3px 15px 4px 15px;
}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub {
left: 0;
z-index: 999;
}
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub {
left: 100px;
}
<div class="nav-container clearfix">
<ul id="nav">
<li class="first"><span>Home</span>
</li>
<li>whysoy<span>Why Soy?</span>
</li>
<li>plantatree<span>Candle Sold, Tree Planted</span>
</li>
<li><span>Build-a-Candle</span>
</li>
<li><span>Contact Us</span>
</li>
<li><a class="category" href=""><span>Buy Products</span>
<ul class="level0">
</ul>
</a>
</li>
</ul>
</div>
UPDATE #3 (with new info from OP)
in order to achieve what you want, just make this changes below on your CSS:
.nav-container {
background: none repeat scroll 0 0 #d4dadd !important;
box-shadow: 10px 10px 5px #888888 !important;
float: left;
font-size: 0;
font-weight: bold;
margin: 10px 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
#nav li {
border-right: 1px solid #000;
display: inline-block;
font-size: 12px;
height: 50px;
list-style: none outside none;
margin: 5px 0;
padding: 5px;
position: relative;
vertical-align: top;
width: 15%;
}
#nav ul li, #nav ul li.active {
background: none repeat scroll 0 0 #d4dadd;
border-right: 0 none;
display: block;
float: none;
margin: 0;
width: 100%;
}
/*you may delete this:
#nav ul li.last {
}*/