Box sizing

  • box-sizing on MDN docs.

    The box-sizing CSS property sets how the total width and height of an element is calculated.

box-sizing: content-box;
width: 100%;

Add border, but element goes outside of the parent.

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

Keep element inside parent.

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;