Centered isn't... centered

[Ananemain]

I have three images (header and two bars to frame my nav bar) centered using this code:

.main {	display: block;	margin-left: auto;	margin-right: auto;}

This looks fine, but when I center text using text-align, it's all slightly off center. I didn't notice until I fully set up my navbar and realized the text was farther to the right than "center." I fixed it by adjusting margin-right, but I want to know what caused the problem. (Especially since I'm having the same problem with the footer.)

 

Nav Bar Code:

#bar ul{	list-style: none;	text-align: center;	word-spacing: 150px;	margin-right: 40px;	}#bar li {	font-family: Helvetica, "Helvetica Neue", Gotham, Arial, sans-serif;	font-size: 20px;	display:inline;}

[dsonesuk]

For un/ordered lists they have by default a margin, padding and in some browsers text-indent applied to them, that is why you should zero these when using for a menu.