Web Navigation Bar Will Not Center

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"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></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"><a href="<?php echo Mage::getBaseUrl(); ?>"><span>Home</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>whysoy"><span>Why Soy?</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>plantatree"><span>Candle Sold, Tree Planted</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>build-a-candle.html"><span>Build-a-Candle</a></li>
    <li><a href="<?php echo Mage::getBaseUrl(); ?>contact-us"><span>Contact Us</a></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. \n

 /*** 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"><a href=""><span>Home</span></a> </li> <li><a href="">whysoy<span>Why Soy?</span></a> </li> <li><a href="">plantatree<span>Candle Sold, Tree Planted</span></a> </li> <li><a href=""><span>Build-a-Candle</span></a> </li> <li><a href=""><span>Contact Us</span></a> </li> <li><a class="category" href=""><span>Buy Products</span> <ul class="level0"> </ul> </a> </li> </ul> </div> 

\n

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 {

}*/