codigo simple..pero no me funciona :(

[ras_chalo]

hola, tengo una duda al realizar un pequeño codigo....

tengo esto men el html:

Código HTML:

<div id="Menu">                                
 <a class="inicio"  href="index.html"><span>Inicio</span></a>
 <a class="services" ref="QuienesSomos.html">span>Con&oacute;zcanos</span></a>
  <a class="services" href="servicio.html"><span>Servicios</span></a>
  <a class="Planes" href="servicio.html"><span>Planes</span></a>
  <a class="contact" href="Contacto.html"><span>Contact</span>o</a>                                  
  </div>
 

bueno si se fijan es un menu bastante simple....

ahora dejo el css del menu:

Código CSS:

#Menu a
{
    width: 120px;
    padding-top: 10px;
    line-height: 40px;
    vertical-align: middle;
    float: left;
    background:url(img/boton.png)  left no-repeat;
    background-position: 0px 10px;
    padding-left: 15px;
    color: #FFF;
    font-family: Candara;
    font-size: 20px;
    text-decoration: none;
    text-align:left;
    margin-left: 10 px;
}
 
#Menu a:hover, #Menu a.active
{
    background:url(img/boton_2.png)  left no-repeat;
    background-position: 0px 10px;
    color: #FFF;
}
 

ok...hasta ahy todo perfecto y claro...

en donde tengo problemas es que necesito darle a "INICIO" un espacio para que quede centrado en su cuadro:



si se fijan es solo "INICIO" donde esta el problema..y necesito centrarlo en su cuadro... puse esto pero no me funciona:

Código CSS:

#Menu a inicio
{
    padding-left: 30px;
}
 

alguna sugerencia?

de ante mano muchas gracias!!