Lista desordenada que no se alinea completamente a la izquierda en un div

Question

Tengo una lista desordenada que estoy usando como una barra de navegación simple. Eso se parece a continuación:

Como se puede ver sin embargo que <li> elementos no están alineando todo el camino a la izquierda de la <div> están contenidos en He tratado text-align: left; en el <div> que contiene pero que parece. para no tener efecto

HTML relevante:

<div id="menu">                   
    <div id="menutop">                 
     <ul>                    
      <li><a href="#">Home</a></li>            
      <li><a href="#">About</a></li>            
     </ul>                   
    </div>  

CSS relevante:

#menu { 
    width: 800px; 
    margin: 0 auto; 
} 

#menu div { 
    float: left; 
    width: 400px; 
    height: 60px; 
    background-color: #CACACA; 
} 

#menutop { 
    text-align: left; 
} 

#menutop ul { 
    list-style: none; 
} 

#menutop li { 
    display: inline; 
    padding: 10px; 
} 

#menutop a { 
    color: #000000; 
    text-decoration: none; 
} 

#menutop a:hover { 
    text-decoration: underline; 
} 

¿Alguna idea?

Answer 1

ul y li tienen margen o relleno, según el navegador, de forma predeterminada. Necesita anular este estilo por defecto dentro de su menú:

#menu ul, #menu li { 
    margin: 0; padding: 0; 
} 

ver una demostración here

^{Nota: Por defecto, jsfiddles hace un restablecimiento CSS, por lo que no siempre se adapta bien para probar este tipo de cosas . Asegúrese de deshabilitar "CSS normalizado" cuando busque este tipo de error.}

Answer 2

Intente utilizar un CSS Reset.

La forma más simple es:

* { margin: 0; padding: 0; } 

Answer 3

<ul> elemento es align izquierda, pero <li> elementos tienen padding-left conjunto a 10px. Es por eso que el primer elemento está ligeramente a la derecha.

Answer 4

puede anular el relleno y el margen de ul y li.

este código simple:

.menu ul, .menu li{ 
    margin:0; 
    padding:0; 
} 

Answer 5

Se puede quitar el margen y el relleno del menú

#menu *{ 
margin:0; 
padding:0; 
} 

Answer 6

acolchado conjunto, 0px margen,

#menutop ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

Demo

http://jsfiddle.net/tQb75/