menu descentrado

No soy muy bueno con css, pero estaba tratando de hace un menu horizontal, el problema es que me sale descentrado, estaba usuando el tutorial de aca, queria que la etiqueta div le contega totlamente al menu, no hay algun atributo para que la etiqueta <div> por defecto le envuelva a todo lo que se sale de ella, no se si me explique bien, pero aqui pongo lo que tengo.

Código :

<div class="menu">
<ul id="navi">
  <li><a href="#">inicio</a></li>
  <li><a href="#">acerca de</a></li>
  <li><a href="#">contactos</a></li>
</ul>
</div>

y el archivo css es el siguiente

Código :

#navi {  
   list-style:none;
   margin:0;
   padding:0;
}
#navi li {
   margin:2px;
   padding:2px;
   border:1px solid #CCCCCC;
   float:left; //para eliminar el comportamiento de elemento de bloque(salto de linea)
}
#navi li a {
   display:block; //Convertimos el vínculo en un bloque.
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
}
.menu{
      width:580px;
      height:auto;
      background-color:#FFF;
      border-style:solid;
      border-width:1px;
      border-color:#0000F0;
      margin:10px 10px auto 220px;
      padding:10px;
      width:750px;
}

Solo estoy probando los tutoriales de css de aca, pero no logro hacer que <ul> quede dentro de la etiqueta <div class="menu">

pd. solo se ve descentrado en firefox, ie no se ve mal.