Hola compañeros. No tengo claro lo de la suma total del border y padding respecto al width para evitar scroll cuando se renderiza - 10:57...

@hec_lopz buen aporte

Cuando utilizas como ancho de una caja un porcentaje es porque quieres que si el tamaño de la pantalla cambia el tamaño de la caja se adapte y así evitar el scroll horizontal. La propiedad box-sizing no permite recalcular el tamaño del contenido con respecto al ancho de la pantalla para que el padding y el border no te afecten. Solo debes tener en cuenta que el margin no entra dentro de este calculo, así que si le pones margin a tu caja igual va aumentar el ancho de la misma.

grandeee @herctor

Muchas gracias compañeros @irvingjuarez y @hec_lopz me han dado mas claridad respecto al tema

Cuando el profe le agrega un width de 100%, esta diciendo que el contenido de la etiqueta (la capa mas profunda después de padding, border y margin) va a ocupar todo el ancho de la pantalla. Entonces cuando se le agrega un padding (relleno al texto), la caja es mas grande que la pantalla y por eso se hace el scroll.

Al momento de quitar el padding y el margin que se dan por defecto y agregar

Aunque si se le agrega un margin, vamos a tener que hacer scroll de nuevo. La idea es que te quede algo como esto

Si tu tienes espacio de 500px en tu pantalla, entonces le dirías a una caja que tenga 500px de ancho para que cubra todo el ancho de la pantalla y así será, sin embargo, si tú quieres que haya un espacio entre el borde de tu caja y el texto, entonces le puedes agregar 5px de padding a cada costado para que exista esta separación; el problema es que ahora tu caja mide 510px (5px + 500px + 5px) y el espacio que tienes en pantalla sigue siendo de 500px, por eso es que se genera un scroll. Espero que te ayude.