List Displaying Slightly Off Centered

I can't seem to figure out why my list is displaying slightly off center. I have some text below it in the same container that is 100% centered but the list seems to be padded slig

Solution 1:

All you need to do is add the following line to your CSS rule:

#navlist {padding:0}

and that will remove that extra left padding that you have. I tried to fix your css code a little bit using shorthand css lines (i.e. margin and font), hope that helps:

#footer_menu{
    height:75px;
    margin:0 auto;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000;
}
#footer {
    height:75px;
    width:1024px;
    background-image: url('images/footer_img.jpg');
}
#navlist {padding:0}
#navlist li {
    display:inline;
    list-style-type:none;
    padding-right:5px;
    font-size:11px;
}
#navlist li a {
    font:lighter 11px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
}    

Solution 2:

Add this style

#navlist
{
   clear: left;
    padding: 0;
}

Solution 3:

I'm not a huge fan of putting spacers inside of my <li> elements. Normally if I need to do what you're trying to do, I use <p> tags instead. See my code below:

HTML:

<div id="footer-menu">
    <p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Archive</a> | <a href="#">Get Involved</a> | Blog | <a href="#">Contact</a></p>
    <p>All content produced by <img src="images/dblzerofilms.jpg" width="190" height="13" /> Copyright 2011</p>
</div>

CSS:

#footer-menu {
    font: 11px/1 Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #000; }
#footer-menu a {
    text-decoration: none;
    color: #000;
    margin: 0 5px;
    display: inline-block; }

Preview: http://jsfiddle.net/Wexcode/Lb9XC/