How to make navigation menu stay in place
===

When structuring a navigation menu with an UL(unordered list), I've noticed when I zoom in and out of the page the list items shift to the right making them come out of line. 
How do make them stay in the same place at all times?

    <div id="navigation">
                         <ul>
                                <font face="Verdana, Geneva, sans-serif">
                                <li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
                                <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                                <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                                <li><a> KİTABLAR </a></li>
                                <li> <a> VİDEOLAR </a> </li>
                                <li> <a id="last-item">FOTOLAR</a> </li>
                                </font>
                         </ul>
    #navigation {
    	width: 900px;
    	margin: 0 auto 0px;
    }
    
    div#navigation ul li {
    	font-size:9px;
    	list-style:none;
    	background-color:transparent;
    	background-color:#FFF;
    	float: left;
    }
    div#navigation ul li:hover {
    	background-color:#9C1A35;
    }
    div#navigation ul li a {
    	color:#333333;
    	text-decoration:none;
    	display: block;
    	padding:10px 43px 20px;
    }
    #navigation ul li a:hover {
    	color:#fff;
    }
    ul {
    	padding:0;
    }
    #active-li {
    	background:#9C1A35 !important;
    }
    #active-li a {
    	color:#fff !important;
    }
    #last-item {
    	padding: 10px 42px 20px 42px !important;
    }
    div#navigation ul li #active {
    	background:#9C1A35 !important;
    }
    div#navigation ul li #active a {
    	color:#fff;
    }