html - 容器流体无法在 Chrome 上正确填充屏幕宽度

Question

我的网站上有一些容器流体 div，到目前为止，我一直在 Safari 中查看该网站。我使用的是 Bootstrap 4，它在我的 chrome 版本中显示不正确。

这是 safari 中的容器流体之一: view from safari

这是来自 Chrome 的 View :view from chrome

如何让它在 Chrome 上占据整个屏幕宽度？

这是一些 HTML

<div class="site">
    <div class="container my-5 site-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="carousel slide" data-interval="9000" data-ride="carousel" id="frontpageCarousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active"><img alt="Giant_head_brighter_500_x_600" class="d-block img-fluid" src="Images/Front-Slideshow/Giant_head_500_x_500.jpg">
                        </div>


                        <div class="carousel-item">
                            <img alt="final_shot_with_bottle_500_x_600.jpg" class="d-block img-fluid" src="Images/Front-Slideshow/giant_button_500_x_500.jpg">
                        </div>

                        <div class="carousel-item">
                            <img alt="final_shot_with_bottle_500_x_600.jpg" class="d-block img-fluid" src="Images/Front-Slideshow/two_figures_500_x_500.jpg">
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6">
                <h1>We build custom props.</h1>


                <p>We utilize a network of the best prop makers in the movie, commercial, trade show, event, advertising, marketing and themed entertainment industries to create amazing props.</p>


                <p>We select the best-suited veteran artisans and fabricators for your project — artisans who fabricate for some of the most popular TV shows, the biggest movies and some of the world’s best known companies, like Disney, Universal Studios, NASA, Red Bull, Mazda, JetBlue, Dior and many more.</p>


                <p><b>We're great at what we do and we're here to do it for you.</b>
                </p>


                <div class="text-center">
                    <a class=" btn btn-primary" href="request-estimate.html" style="margin-top: 15px">Request an Estimate</a>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid testimonial">
        <div class="spacer">
        </div>


        <div class="container my-5">
            <p>"Absolutely blown away by your team's work and professionalism. Client thrilled. Great execution. Great teamwork."</p>
            <i>- Project Managers, Derse</i>

            <p>[Derse is ranked as a Top 10 Experiential/Event Marketing Agency by Advertising Age]</p>
        </div>


        <div class="spacer">
        </div>
    </div>

和我的CSS:

.testimonial {
background-color: #e6e6e6;
margin-top: 50px;
margin-bottom: 50px;
}

.spacer {
    height: 30px;
}

div.testimonial {
    color: #6f6f6f;
}

div {
    font-family: 'Cabin', sans-serif;
}

p {
    text-align: justify
}

.nav-link {
    color: black !important;
}

.nav-link:hover {
    color: #b13034 !important;
}

.container {
    max-width: 1080px;
}

h1 {
    color: #bf4844
}

p {
    font-size: 18px;
}

.btn-danger {
    background-color: #bf4844;
}

.footer {
    background-color: #15202c;
    color: white;
}

.footer h5 {
    font-size: 12px;
}

.active {
    color: #b13034;
}

h3 {
    color: #bf4844;
    font-size: x-large;
    line-height: 1.3em;
}

.side-testimonial {
    color: #6f6f6f;
    line-height: 1.5em;
    font-size: 18px;
}

.info-header {
    background-color: #cccccc;
}

.info-head {
    color: #6f6f6f;
    font-size: large;
}

a {
    color: #b13034;
}

a:hover {
    text-decoration: none;
    color: #ff5050
}

.nav a {
    color: white;
}

.nav a:hover {
    color: white;
}

.navbar-toggler-icon {
    border-color: white;
}

@media (max-width: 543px) {
    .navbar .navbar-brand {
        float: none;
    }
}

.side-testimonial i {}


/*
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}
*/

.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

Answer 1

解决问题的方法是将此添加到我的 CSS 中:

.container-fluid {
margin-right: 0;
margin-left: 0;
}