Кнопки навигации перемещаются из места при изменении размера окна

Я не могу понять этого в течение нескольких дней - когда я изменяю размер окна, мои кнопки перемещаются и уходят туда, где они хотят. Но я хочу, чтобы они остались на своем месте. Я просмотрел много статей, но ничего не помогает. Может ли кто-нибудь помочь?

Этот мой CSS-код для всей навигации:

#navigation li a {
    background: url(images/buttons.png) no-repeat;
}
#header {
    background: url(images/bg-header.png) no-repeat center top;
    height: 206px;
    text-align: right;
}
#header > div {
    margin: 0 auto;
    padding: 0 10px;
}

#logo {
    float: left;
    margin-left: 80px;
    margin-top: 10px;
    margin-right: 140px;
    border-style: none;
}
#navigation {
    float: left;
    list-style: none;
    display: inline-block;
    width: 610x; 
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
    font-size: 13pt;
    height: 206px;
    width: 147px;
    margin-left: -25px;
    text-align: center;
}
#navigation li a {
    background-position: -144px 0;
    color: #e4dec0;
    display: block;
    font-family: 'Caudex-Regular';
    font-size: 14px;
    height: 206px; 
    width: 138px;
    line-height: 1.5em;
    outline: 0;
    text-decoration: none;
    text-shadow: 1px 1px #3d3413;
    text-transform: uppercase;
    padding-top: 65px;
}
#navigation li a:hover, #navigation li.selected a {
    background-position: 0 0;
    color: #fff;
}

И вот код HTML:

<div id="header">
        <div>
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" border="0" alt="LOGO"></a>
            </div>
            <ul id="navigation">
                <li class="selected">
                    <a href="index.html">Tipogrāfijas grāmatiņas</a>
                </li>
                <li>
                    <a href="index2.html">Paštaisītās grāmatiņas</a>
                </li>
                <li>
                    <a href="content.html">Saturs</a>
                </li>
                <li>
                    <a href="gallery.html">Galerija</a>
                </li>
                <li>
                    <a href="orders.html">Pasūtījumiem</a>
                </li>
                <li>
                    <a href="contactform.html">Kontakti</a>
                </li>
            </ul>
        </div>
</div>

Вот скрипка - http://jsfiddle.net/simonapruse/rMxN4/