Html 容器液体未在铬上正确填充屏幕宽度

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

以下是safari中的一种容器流体：

以下是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>

---

您使用的是

container

类，所以它采用引导程序用于容器的固定宽度，所以按照下面的代码更改它

改变它

<div class="site">
<div class="container my-5 site-content">

。推荐信{
背景色：#e6；
边缘顶部：50px；
边缘底部：50px；
左边距：0；
右边距：0；
}
.垫片{
高度：30px；
}
鉴定书{
颜色：#6f6f6f；
}
div{
字体系列：“CAB”，无衬线；
}
p{
文本对齐：对齐
}
.导航链路{
颜色：黑色！重要；
}
.导航链接：悬停{
颜色：#b13034！重要；
}
.集装箱{
最大宽度：1080px；
}
h1{
颜色：#bf4844
}
p{
字号：18px；
}
.btn危险{
背景色：#bf4844；
}
.页脚{
背景色：#15202c；
颜色：白色；
}
.页脚h5{
字体大小：12px；
}
.主动{
颜色：#b13034；
}
h3{
颜色：#bf4844；
字号：x大号；
线高：1.3em；
}
.旁白{
颜色：#6f6f6f；
线高：1.5em；
字号：18px；
}
.info标题{
背景色：#中交；
}
.资讯总监{
颜色：#6f6f6f；
字体大小：大号；
}
a{
颜色：#b13034；
}
a:悬停{
文字装饰：无；
颜色：#ff5050
}
.导航a{
颜色：白色；
}
.导航a:悬停{
颜色：白色；
}
.navbar切换图标{
边框颜色：白色；
}
@介质（最大宽度：543px）{
.navbar.navbar品牌{
浮动：无；
}
}
.旁白{}
/*
html{
位置：相对位置；
最小高度：100%；
}
身体{
边缘底部：60px；
}
.页脚{
位置：绝对位置；
底部：0；
宽度：100%；
高度：100px；
}
*/
.地点{
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
}
.网站内容{
弹性：1；
}

我们制作定制道具。
我们利用电影、商业、贸易展览、活动、广告、营销和主题娱乐行业的最佳道具制造商网络，创造出令人惊叹的道具

我们为您的项目选择最合适的资深工匠和制造商-为一些最受欢迎的电视节目、最大的电影和一些世界最知名的公司（如迪斯尼、环球影城、NASA、，
红牛，马自达，捷蓝，迪奥和更多

我们的工作非常出色，我们在这里为您服务。

“完全被你的团队的工作和专业精神所打动。客户激动不已。出色的执行力。出色的团队合作。”

-项目经理
[Derse是按广告年龄排列的十大体验/活动营销机构]

解决问题的方法是将此添加到我的css中：

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

---

但是，在我的html中作为容器流体的部分并不在容器内。将该div更改为流体只会影响顶部，实际上不会影响推荐部分。如果你一直跟踪div块，它就不会封装在你更改的块中。我发布了

.estimonal

的css部分，它在chrome中运行良好请参见

codepen

link.Oooooh，现在有意义了。在我将.container-fluid的左右边距设置为0时工作。是的，您可以这样做，但这是一个引导类，因此如果您更改它，将影响使用它的站点的每个部分，这就是我更改鉴定类属性的原因。

<div class="site">
<div class="container-fluid my-5 site-content">

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

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