html - 引导宽度问题

Question

我使用的是 Bootstrap 4.5 版。我正在努力创建一个响应式网站，我从大 View 开始，然后构建我的移动方式。当我将网站调整为较小的 View 时，它开始在右侧形成一个大的白色间隙。您可以使用以下链接查看该网站。 Website URL那么，是否有任何原因会导致出现此问题？我也有以下元如果您需要更多信息，可以使用上面的链接访问该网站。注意:我尝试更改框大小并删除填充和边距。

    #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>

Answer 1

专业建议:将此 * {outline: red 2px solid;} 添加到您的 css 中，看看奇迹发生了。它会告诉您哪些元素溢出或它们有多大。 outline 甚至不会移动您的内容，因为它与未应用于元素大小的 border 不同。

一旦你这样做了，你会发现有几个问题，都与溢出有关。你的 nav-bar 有一个 padding-left 和 padding-right 导致第一次溢出发生。

然后在此处删除负边距:

最后通过这些，并删除额外的填充: