I used the developer tools (Google Chrome) and I couldn’t find what it’s overflowing.
I don’t want to use overflow-x: hidden; because I feel that it’s not a good practice.
It’s because of this:
main {
width: 100vw;
}
Change that to 100% and the scrollbar disappears. Reason is that 100vw is the whole window width including the vertical scrollbar, so it’s always better to work with % instead of vw.
1 Like
When should I use vh though?
Kevin powell suggested better on this in his youtube channel actually. Give outline to universal selector. It will give outline to every element, thus highlighting the culprit.
1 Like
Assuming you meant vw: Someone may correct me, but I don’t think there’s many use cases. Some people use it to let the font-size grow with the window width (like font-size: 3vw). But that’s almost always a bad idea, unless it’s just one heading.
vh is different, it often makes sense to set the height of an element to the whole viewport height.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.