The most common problem that I see is that people (almost always writing their CSS on a Mac, because Macs, by default, would hide the consequences of this) assi

The most common problem that I see is that people (almost always writing their CSS on a Mac, because Macs, by default, would hide the consequences of this) assign a width of 100vw to their header, footer, or main section, as a result of which, the moment that the page content's height exceeds the viewport height, the page will show not just a vertical scrollbar, but a horizontal scrollbar as well, because now 100vw is greater than 100% of body width. The above is easily fixed; however, I have also seen designs like this one [0], where a team has painted itself into a corner by assigning max-width to the body element; yet also wanting to have hero elements inside of the body element that would break out of the confines of the body and span the whole width of the viewport. They tried to use 100vw for the hero, which resulted in the infamous horizontal scrollbar. (I have since learnt — from Josh Comeau, I think — that their design problem could have been cleanly solved by designing the layout with CSS grid) [0] - https://i.imgur.com/LNyJIAq.png https://i.imgur.com/LNyJIAq.png