Bootstrap 4 列和行产生不需要的填充[重复]

我正在尝试使用 bootstrap 创建列和行来放置我的图像，但是在图像周围添加了太多的填充，这导致我的图像看起来不像设计：

这就是我构建 HTML 的方式：

<!-- header -->

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
                </div>
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
                    </div>
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="container">
                            <h1>@php(get_field('front-page__title'))</h1>
                            <div>@php(get_field('front-page__slogan'))</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-9">
                            <div class="container">
                                <div class="zeo-cases-button">
                                    <a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="container">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- /header -->

但这导致了这样的结果：

我的问题。我是否正确编写了引导元素？如果引导元素编写正确，我应该如何处理填充，以便我可以匹配设计的要求？非常感谢您抽出时间！

添加班级no-gutters每一个div class="row"删除之间的空格col-*元素

查看引导程序文档 https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters关于排水沟。

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ddd" class="col-sm-3">d</div>
</div>

这里有一个正在工作的jsfiddle https://jsfiddle.net/satjy26e/这也删除了“视觉填充“一旦图像不能 100% 放入容器中。