box-sizing

Define qué incluye el width y el height de un elemento. Es la propiedad que decide si el padding y el border suman al tamaño que has declarado o forman parte de él.

content-box (predeterminado): width y height solo miden el contenido; el padding y el border se suman por fuera.
border-box: width y height incluyen el contenido, el padding y el border, así que el tamaño final es exactamente el declarado.

Ejemplo

Los dos hijos tienen el mismo width, padding y border. Cambia box-sizing en la clase item y compara su tamaño final con el del hijo de referencia.

Selecciona box-sizing:

content-boxborder-box

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">reference</div>
  <div class="child item">item</div>
</div>

<div class="container">
  <div class="child">reference</div>
  <div class="child item">item</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.child {
  border: 6px solid #1b1e26;
  margin-bottom: 0.75rem;
  padding: 1.5rem;
  width: 14rem;
}

.item {
  background: #d9d2f5;
  box-sizing: content-box;
}

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.child {
  border: 6px solid #1b1e26;
  margin-bottom: 0.75rem;
  padding: 1.5rem;
  width: 14rem;
}

.item {
  background: #d9d2f5;
  box-sizing: content-box;
}

Edita el código o usa los selectores: el resultado cambia al instante.