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 -->