Box Model

This is how the box model works. We have the content, surrounded by protective padding, encased in a border, with a margin outside of the border.

Content Box

content-box causes problems and it happens to be the default for the box-sizing parameter in CSS.

The child overlaps the parent because of the padding and border parameters.

.parent {
    width: 100%;
}

.child {
    width: 100%;
    padding: 5px;
    border: 2px solid var(--color-gray-500);
    box-sizing: content-box;
}

Border Box

This whole situation is fixed with border-box.

.parent {
    width: 100%;
}

.child {
    width: 100%;
    padding: 5px;
    border: 2px solid var(--color-gray-500);
    box-sizing: border-box;
}