div set the width and then set padding or margin beyond the solution of the parent element

Elements are added box-sizing: border-box; you can solve

And then set the element width plus the margin and padding, child elements would exceed the width of the parent element, certainly sometimes it does not require such a solution: add a box-sizing property can be;

box-sizing property corresponding to three values

box-sizing: content-box|border-box|inherit;

1.content-box

This should be part of the default, width and height respectively applied to the content box elements, draw padding and border elements outside the width and height.

2.border-box 

Any padding and border specified for the elements are drawn in the set width and height, by subtracting from the set width and height, respectively, borders and padding to get the width and height of the content.

3.inherit 

Box-sizing property value inherited from a parent element.