Changing Bootstrap 4 gutters without Sass

Question

Is this possible?

I did find an answer on the following post: Bootstrap change $grid-gutter-width

...and then added this code to my CSS:

/* .row {
    margin-left: -20px;
    margin-right: -20px;
}

.row > [class^="col-"], .row > [class^=" col-"] {
   padding-right: 20px;
   padding-left: 20px;
 } */

But I then end up with a horizontal scrollbar on my site.

Answer 1

The gutter also applies to the container which creates the outermost (left & right) gutters...

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

Demo