[HTML][CSS]Problem z marginesem w poziomym menu Opcje

[--pabloemax--]

Witam, głowię się dwa dni i wiem że to prosty błąd na pewno ale nie umiem dojść gdzie i jaki.
mam kod html w pliku menu.html

[HTML] pobierz, plaintext 
 <link rel="stylesheet" href="menu.css" type="text/css">
<div id="menup"><ul class="menu">
<li id="current" class="item1"><a href="Miasto"><span>Miasto</span></a></li>
<li class="item2" ><a href="Kultura i Rozrywka"><span>Kultura i Rozrywka</span></a></li>
<li class="item3" ><a href="Edukacja"><span>Edukacja</span></a></li>
<li class="item4"><a href="Zdrowie"><span>Zdrowie</span></a></li>
<li class="item5"><a href="Sport"><span>Sport</span></a></li>
</ul></div>
[HTML] pobierz, plaintext 

oraz klasy CSS w pliku menu.css zebrałem to celowo do tych plików i tylko potrzebne linijki

[HTML] pobierz, plaintext 
.menu {float:left;display:block;width:965px;height:32px}
.menu li {height:32px;display:block;float:left}
.menu a {display:block;height:100%}
.menu span {display:none}
.item1 {width:193px}
.item2 {width:193px}
.item3 {width:193px}
.item4 {width:193px}
.item5 {width:193px}
 
div#menup {
	background:url('img/menu.bmp');
        width:965px;
        height:32px;
        float:left;
        overflow: hidden;
        background-color: #fff;
        padding: 0px;
}
[HTML] pobierz, plaintext 

Grafiki wyświetlane są poprawnie ale warstwy item1,2,3,4,5 są przesunięte o około 40px ? i to jest moje pytanie gdzie i co robię źle? menu jest w jednym pliku całe i chcę tylko zrobić warstwy na nim niewidoczne z możliwością klikania co mi w sumie wyszło ale tak jak wyżej pisałem, warstwy są przesunięte o około 40px?achciałbym żeby były wyrównane do lewej strony i zaczynały się równo z plikiem graficznym.