In CSS, when adding padding to any element, it usually adds to the width and height of the element. For example, you might have two elements inside a container side-by-side:
Next, let’s say you want to add padding to the inside elements to make the text easier to read. When we do so, the padding gets added to the width and height of the elements, causing the second element to go the next line:
In order to prevent this behavior, we can add the following CSS for all elements:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
This is the result:
I read about this trick in this surefirewebservices.com article.