Bootstrap Width issue

user_14087741 0
Viewed 45

I'm using Bootstrap version 4.5. I'm working to create a responsive website I started in Large view as a started then build my way to mobile. When I resize the website to smaller views it starts to make a large white gap on the right. You can view the website using the following link. Website URL So, is there any reason for this problem to occur? I have the following meta too If you need anything more you can visit the website using the link above. Note: I tried changing box-sizing & removing padding & 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>

bootstrap-4 css html
1 Answers

Pro tipp: Add this * {outline: red 2px solid;} somewhere to your css and see the magic happen. It will tell you what elements are overflowing or how big they are. The outline won't even shift your content, as it's unlike a border not applied to the size of the element.

Once you did that, you will see that there are several issues, all related to overflow. Your nav-bar has a padding-left and padding-right that causes the first overflow to happen.

enter image description here

Then remove the negative margins here: enter image description here

Finally go through these, and remove the additional paddings: enter image description here enter image description here

user_42993310
Related