FIX SCROLLING WITH BOX-SIZING: BORDER-BOX
Sometimes, unexpected scrollbars can appear on your website and it's not always obvious why. In most cases, I've found that the fix to this is using the box-sizing: border-box property.
Lets say, for example, I put the height of 100vh onto an element, plus I have padding on there too. That can easily cause vertical scrolling like so:
This is because the element (the content) is one size, plus the padding is added on top of this content size too.
In order to prevent this, I can use the box-sizing: border-box property like so:
This ensures that now, the padding is included in the total size of the content, so I don't have the scrollbar anymore like so: