White space on right side - Bootstrap 4

Question

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!

See if [this Bootstrap3 answer](https://stackoverflow.com/a/35236594/1447509) is useful to you. — cssyphus, Dec 01 '18 at 22:49

score 1 · Answer 1 · edited Dec 01 '18 at 23:03

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;
}

score 1 · Answer 2 · answered Apr 06 '19 at 15:00

1

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

answered Apr 06 '19 at 15:00

Colin Cummings

36
3

score 0 · Answer 3 · answered Oct 31 '22 at 07:59

0

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

answered Oct 31 '22 at 07:59

Hansana Dasanayaka

91
1
9

White space on right side - Bootstrap 4

3 Answers3