CSS <ul> Navigation Bar Centering Issues

Question

Take a look at this website I am working on: new.AudioManiacProductions.com

A screenshot from Dreamweaver showing the divs can be found here: new.AudioManiacProductions.com/images/stack.png

Notice how to navigation bar is not centered and the "home" has an intent on the left side. I want the nav bar to stretch the whole span of it's parent container and be centered both vertically and horizontally.

Here's my CSS for the navigation section of the page, the nav list item, and the links.

#nav {
    width: 100%;
    height: 40px;
    margin:  0 auto;
    padding: 0px;
    text-align: center;
    color: #FFF;
    list-style: none;
    line-height: auto;
    verticle-align: middle;
}
#nav li {
    padding: 0px;
    display: block;
    width: 20%;
    list-style-type: none;
    float: left;
    text-align: center;
    overflow: hidden;
    line-height: auto;
    verticle-align: middle;
}
#nav li a {
    font-size: 18px;
    font-weight: 600px;
    text-decoration: none;
    font-weight:800;
    color:#FFF;
}
#nav li a:hover, a:visited {
    color: #00F;
}

And here is my HTML:

<div id="nav">
  <ul>
<li><a href="index.php?home">Home</a></li>
    <li><a href="index.php?about">About Us</a></li>
    <li><a href="index.php?packages">Packages</a></li>
    <li><a href="index.php?quote">Quote</a></li>
    <li><a href="index.php?contact">Contact Us</a></li>
  </ul>
  </div>

Any help is greatly appreciated!

Answer 1

Browsers set padding-left by default on UL tags. Remove the padding and that should help out.

#nav ul {
    padding-left: 0;
}

or just clear all padding:

#nav ul {
    padding: 0;
}