Why is the width of the child container 100% larger than that of the parent container?

https://codepen.io/ivanid/pen.

somehow, the width of this sub-container is more than the width of about padding (750 to 28.2). Isn"t the total width supposed to be 750px?

clipboard.png

Css
May.08,2021

that's how it works by default, because the default box- sizing value is content-box,width, which sets content.
you just change width here to auto, or set box-sizing:border-box for child elements.
if you have any questions, go to find the information about the box model. Add


box-sizing:border-box;
sub-elements to solve
width 100%. You set the width of the content


.

it seems that I don't know much about the box model

if you want to be full, you don't need a width at all. It's full by default.

if you must add a width, and the width includes padding, then you need to specify box-sizing:border-box;

Menu