Why do I have a horizontal scrollbar if there's nothing there?


guys :[ this is driving me nuts

To see what you’ve done with your elements add this universal selector at the top of the CSS editor

* {
  border: solid 1px red;

Use it in conjunction with dev tools

tried it, there’s really nothing on the right side

Notice those blocks over there? This is how you have CSS coded.

Use dev tools to see what’s targeted there.
You can also put that property: value: pair in an individual selector to help narrow things down

hint: get rid of background-color: red in .box and then add the border to .perks

bigger hint:

what happens when you comment out width: 100vw; ?

Here’s my process of finding the issue, and hopefully you can use it. First, I think horizontal scrollbar means some element has a way bigger width than the viewport. Second, I search for width in the CSS stylesheet and review the corresponding HTML code.

The issue stems from you using vw units on a few things that are side by side. 1vw unit is 1% of the viewport width, and when you have a few together horizontally it overflowed.

I also think you could review your HTML.