I'm currently utilizing Bootstrap 4.5 for my project where I aim to develop a responsive website starting from large view downwards to mobile. However, when I resize the site to smaller views, it creates a large white gap on the right-hand side. You can access the website by clicking on the following link: Website URL. Do you have any insights into why this issue might be happening? I've included the meta tag below, and if you require additional information, please visit the website through the provided link. Note that I have already tried adjusting box-sizing, removing padding, and margins.
#tutorials{
background-image: url("../Images/Header.png");
background-position: center 0%;
background-size: cover;
background-repeat: no-repeat;
}
#scrollBtn {
display: none;
position: fixed;
bottom: 1%;
right: 5%;
z-index: 2000;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<button onclick="backToTop()" id="scrollBtn" class="btn btn-danger m-3" ><i class="fas fa-arrow-up text-white"></i></button>
<main>
<section id="tutorials" class="jumbotron jumbotron-fluid vh-100 d-flex justify-content-center align-items-center text-white flex-column">
<h1 class="display-1">Tutorials</h1>
<hr class="w-50 mx-auto hr-header">
<p class="lead">Get the latest Tutorials through this page.</p>
</section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-sm-12 mb-5">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
</div>
<div class="card-body">
<h1>Title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptates.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-12 mb-5">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
</div>
<div class="card-body">
<h1>Title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptates.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-12 mb-5">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
</div>
<div class="card-body">
<h1>Title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptates.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-12 mb-5">
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://tv.adobe.com/embed/1221/24197/"></iframe>
</div>
<div class="card-body">
<h1>Title</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptates.</p>
</div>
</div>
</div>
</div>
</div>
</main>