Stack Exchange
White space on right side - Bootstrap 4
I'm making a website in Bootstrap 4, but while creating one section I've ended up with the annoying white space on the right that causes unwanted horizontal scrolling.
Been playing with Inspector for ages, but can't figure out where's the problem.
Full code with the relevant section here: https://jsfiddle.net/dusset/aq9Laaew/284067/
      <div class="row text-center text-light">
    <div id="section-one" class="col mx-auto p-3 mb-5" style="max-width:720px;">
      <h3 class="section-name text-white-50" data-aos="fade-in" data-aos-duration="250" data-aos-delay="250" data-aos-anchor="#section-one">O produkte</h3>
      <h2 data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Preskúmajte nepreskúmané</h2>
      <p class="font-weight-bold mt-5 larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Birthday Capsule je najoriginálnejší a najosobnejší narodeninový darček, aký môžte dať osobe, na ktorej Vám záleží.</p>
      <p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Či je to babka, kamarátka alebo priateľ, život každého z nás má i nepreskúmanú stránku. Teda, donedávna nepreskúmanú…</p>
      <p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Aký vek by mal na Marse? Koľkokrát sa už nadýchla? Čo iné je na dátume jeho narodenia výnimočné? To, i omnoho viac sme preskúmali, a dali do knižky, aby ste to mohli podarovať.</p>
    </div>
  </div>

Any help with removing it is much appreciated!

it's that .row class - remove it and you'll see...

See if this Bootstrap3 answer is useful to you.

Your .row class has margin-left: -15px and margin-right: -15px. This is the cause of your problem.
Add this to your CSS and it's fixed:
.row {
  margin:0px;
}

Here's an updated JSFiddle

If you don't want to override all row classes then add an id to the line below and add a CSS style for that independently.
<div id="something" class="row text-center text-light">
   ...
</div>

And the CSS:
#something {
   margin:0px;
}


Use the "no-gutters" class with the offending "row". See: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Check you external css files. might be there is a overlapped content beyond the edges.
