CSS: 100% width - padding

El problema surge cuando tenemos un elemento que hace de contenedor. Si a los elementos que contienen les asignamos estas dos propiedades:

• width: 100%;
• padding-left: x ;

Dichos elementos primero adquieren el width (ancho ) de su padre y después se le aplica el padding, por tanto el elemento se desplaza fuera del padre.

Vamos a verlo con un ejemplo en JsFiddle:



La solución es agregar esta propiedad

 box-sizing:border-box; 

a los elementos que están dentro del contenedor y que causan el problema, tal y como podemos ver en el ejemplo, así este obstáculo queda resuelto.

¡ Saludos !