Why do I have a horizontal scrollbar?

CodePen.

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.

Video Link

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