posicionando un lapso dentro de un li

Question

ive tengo una lista configurada con una imagen de fondo a la izquierda de cada una de las líneas de texto aunque no parecen alinearse, puse un lapso alrededor del texto para intentar y reposicionar el texto pero no parecía que trabajar

im aquí está el código utilizando ..

HTML

<ul class="price-features"> 
<li><span>One page website with contact form</span></li> 
<li><span>Social Media Integration</span></li> 
<li><span>One year hosting + Domain registration</span></li> 
</ul> 

CSS

.price-features{ 
margin-top:30px; 
} 

.price-features li{ 
background-image:url(/images/prices/orange-arrow.png); 
background-repeat:no-repeat; 
background-position:left; 
padding-left:15px; 
height:30px; 
border-bottom:#999 1px solid; 
background-color:#996; 
} 

.price-features li span{ 
    padding-top:5px; 
} 

http://i.stack.imgur.com/rV1LM.png

Answer 1

El relleno solo afecta a los elementos de nivel de bloque. Tendrá que cambiar su span para que sea un elemento de nivel de bloque o anular el predeterminado display para que sea block o inline-block.

.price-features li span{ 
    display: block; 
    padding-top:5px; 
}