Aplica la propiedad `box-sizing: border-box` a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original. Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con `margin`, `padding`, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento. **Mas detalles aca:** [Box Sizing](https://developer.mozilla.org/es/docs/Web/CSS/box-sizing) ---------- <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> * { box-sizing: border-box; } <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .w-10 { width: 100%; } .w-9 { width: 90%; } .w-8 { width: 80%; } .centered { margin-left: auto; margin-right: auto; } .input { display: block; /** el problema es el padding **/ padding: 1em; } </style> </head> <body> <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em"> <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;"> <div class="centered w-8" style="background: white"> <p>Ancho esperado...</p> </div> </div> </body> </html> <!-- end snippet -->