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

HTML-CSS
#1

https://codepen.io/stratgarcon/pen/mdraaaG

guys :[ this is driving me nuts

#2

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

#3

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

#4

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

Edit:
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; ?

#5

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.

#6

I also think you could review your HTML.