CSS - Entrada al 100% de ancho se superpone a div

Question

Estoy tratando de arreglar un cuadro de entrada regular con relleno, borde, dentro de un div con relleno. Sin embargo, quiero que la entrada tenga su ancho al 100%, pero como puede ver, se superpone. ¿Cómo puedo solucionar esto?

CSS

#one { 
    background:red; 
    width:300px; 
    padding:5px; 
} 
#two { 
    width:100%; 
    border:3px solid blue; 
    padding:4px; 
} 

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​ 

Answer 1

Añadir box-sizing: border-box. De lo contrario, el ancho es 100%, MÁS el borde y el relleno.