Почему так и как исправить????

Почему так и как исправить????менюха слева встаёт! а должна быть по центру! что переделать?

<style>

div#menunav {
width: 500px;
text-align: center; /* задаем ширину для div */
height: 36px;
float: left; /* добавляем список в div */
font-size: 12px; /* задаем размер шрифта */
background-image:url(vs_1.png); background-repeat: no-repeat;

}
div#menunav ul {
margin: 0px;
padding: 0px;
text-align: center;
}
* html div#menunav ul {
float: left; /* заставляет ul вместить все li */
margin-left: 0px; /* IE удваивает заданное значение */
border-left: 1px solid #000000;
text-align: center;
}
div#menunav li {
float: left; /* располагаем список по горизонтали */
text-align: center;
position: relative; /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */
list-style-type: none; /* удаляем маркеры */
border-right: 1px solid #b8d0d9; /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
/* первая вертикальная линия в меню */
margin-left:7px;
}
div#menunav a {
display: block; /* пункты вложенного меню выделяются при наведении указателя */
text-decoration: none; /* удаляем подчеркивание ссылок */
padding: 12px 6px 12px 6px; /* создаем пространство с обеих сторон текста пункта меню */
color: #000000; /* задаем цвет шрифта */
text-align: center;
}
div#menunav a:hover {
color: #ff0000;

}
div#menunav li:hover {
background-image: url(vs_3.gif); background-repeat:repeat-x;/* задает фон пунктов списка */

}

a:link, a:visited, a:hover, a:active {text-decoration: none;}
img {border: none;}
</style>