Why horizontal scrollbar appears?

Question

My site is made of sections that have those styles:

.site-section{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

When I open the site, a horizontal scrollbar appears. I hid it by ::-webkit-scrollbar {display: none;}, but it isn't a good solution because not all browsers support it. Do you know why this problem happens?

Answer 1

You horizontal scrollbar is caused because your site-section has a width of 100vw. The browser is fine with that but it also accounts for margin and padding (blue and red).

This results in an overflow and thus the browser adds a horizontal scrollbar (along with a vertical one);

The best way to fix this is to use calc.

.site-section{
  background-color: lightblue; /* I added this so you can see the new extents of the .site-section */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
}

<div class = 'site-section'>
  Hello world
</div>

Answer 2

The horizontal scroll bar is caused by your CSS: width: 100vw;.

To remove it place the declaration overflow-x: hidden; on your body tag.