**Note: Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin. **
What if we set the width to 100% and there’s a padding, border and margin, and we set box-sizing: border-box, will the child element still oveflow the parent container?
Only if you add margin, as the the name of the box-sizing value implies, border-box includes padding and border within the value you specified in your width, but as you can see below, margin is outside of the border-box.
.