Maybe this is an easy fix, but it has been driving me crazy for a long time so I finally decided to see if a solution exists.
Simply put, I center most of my web pag
NB: overflow-y: hidden
prevents the user from scrolling down by any means, effectively rendering any content below the lower viewport inaccessible.
When the contents of the page no longer fit vertically, the browser adds a scrollbar to the right side of the window. This changes the available width in the browser window, so any content that is either centered or positioned relative to the right side of the window will move left a bit. This is very common.
There are a number of ways to control this, but the most common is to either make it so you always have a scrollbar or never have a scrollbar by controlling the overflow-y
property on the window.
Setting overflow-y: scroll
will force the scrollbars to always be there.
Setting overflow-y: hidden
will force there to never be scrollbars.