Can't figure out why view width is too high on some displays

So I’m probably just missing an absolute div block that has too large of a width set, but for the life of me I can’t find it. My website’s home page (and several others) have a width that is causing the bottom scroll bar to appear and make my navbar appear to have a left margin. I have my page

My two div blocks that contain all of my pages elements have their overflow set to hidden, and width set to 100vw. Theoretically, that should prevent the page from exceeding that width right?

A fresh set of eyes would be helpful. Thanks!

The site is:

Here is my public share link:
(how to access public share link)

Hi @Daenon_Janis,

I can’t fully verify my assertion as I can’t publish your project but could you try using 100% instead of 100vw. I think this could be the viewport width calculation that doesn’t take into account the scrollbar width, could be the reason why you have an horizontal scrollbar for a few pixels.

1 Like

Interesting that 100% rather than 100vw worked. Thanks for the advice!


Late to the game but @ColibriMedia’s instinct was right. If you use 100vw on direct children of the body, you’ll end up with scrollbars on some navigators and OS depending on the scroll settings… of the OS.

I had tat “bug” on 2 sites and it took me forever to solve.

1 Like

Hi @Daenon_Janis, Consider one of the simplest layouts around: two columns placed side-by-side. One contains the navigation menu and the other contains page content. This seems like the ideal candidate for transition from a table-based layout to a CSS layout.

It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH attributes set, contain borders, etc. However, there is one big difference in behavior. If you understand this issue, you’ll save yourself a lot of frustrated debugging time.