Why was this in the css style sheet??* { box-sizing: border-box;}

There are two ways to calculate the "width" of the box.

consider the following example:

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

in this example the width of the box will be 130px
the content will be 100px, the border will be another 20px (10px on each side)
and the padding will add another 10 (5 on each side)

so:

• content: 100px
• padding: 10px
• border: 20px
• total actual width of element: 130px

vs

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

in this example the width of the box will be 100px
The border and padding are still the same, but now instead of adding to the width, they take away from the content width to stay within the 100px.

so:

• content: 70px
• padding: 10px
• border: 20px
• total actual width of element: 100px

helpful link

Source

also note that no matter how you count the box size, the margin is ALWAYS outside.