Why is my website not responsive after using all of bootstrap 4 framework

Question

So I have developed a website for a company using Bootstrap 4 as the framework. Having worked on having a responsive website from the beginning, I'm totally baffled to why there is a huge white gap down (size depends on device res) the right side for all devices.

Even removing parts of the code which I thought was the issue (the navbar). Still no luck, after removing each element of the website to try and determine what was causing the issue. No luck

I have uploaded the site to one of my web servers at www.adameastwood.co.uk/eg/index.html Ignore the slow response time, I was given very high res images and still have not sorted the caching issue.

HTML of the navbar and header:

  <!-- Navigation Look into as responsive is broken -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
    <div class="container">
      <img class=" js-scroll-trigger img-fluid paddingLogo" src="img/logo.png" href="#page-top"></img>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#About">Warum PPG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Advantages">Vorteile & Merkmale</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#Purchase">Kaufen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Kontakt</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="masthead mainImg">
    <div class="container">
      <div class="intro-text">
        <div class="intro-heading ">Willkommen bei</div>
        <div class="intro-lead-in">PowerPerformance Gloves</div>
        <!-- <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a> -->
      </div>
    </div>
  </header>

I dont believe the footer or header is the source of the problem but its a starting point. Thank you for any help :)

Image of the issue Iphone X res, white bar on right

Answer 1

It seems like the contact-section is causing the white gap. The headline is to wide. You can reduce its length, font-size or apply ellipsis overflow on it.

Try this:

#contact .section-heading {
    text-overflow: ellipsis;
    overflow: hidden;
}

or this:

#contact .section-heading {
    font-size: 25px;
}

and you will see the white gap on the right side should not be there anymore.