I'm having trouble center aligning my horizontal navigation bar in css. Spent too much time on it already...AND, I'm a novice. Can you help me please. Here's the code I've been using for the above site:

#nav {
width: 700px;
float: left;
margin: 0 0 1em 0;
background: #d9e2e1;
border-bottom: 2px solid #336799; border-top: 2px solid #336799 }
#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
background: #d9e2e1 }
#nav li {
float: left }
#nav li a {
display: block;
padding: 8px 32px;
text-decoration: none;
font-weight: bold;
}

Place your nav bar code inside a div and add the proper css to it.
html
<div id="nav-bar">Code goes here</div>
css
#nav-bar{
width:700px;
margin:auto;
}

I'm fairly certain that that's what I did....Actually I'm trying to center align the TEXT of the nav-bar...not the nav-bar itself. Here's my html:

<div id="nav">
<ul>
<li><a href="product.html">Products</a></li>
<li><a href="testimony.html">Testimonials</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="family.html">Dot &amp; Her Family</a></li>
<li><a href="store.html">Buy Now</a></li>
</ul>
</div>

The css with the html that you provided has the text center aligned fro me.