引导柱未正确对齐。为什么？

Question

我正在尝试使两列彼此相邻，但是无论如何，它们都彼此重叠。

我的代码是这样：

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <div class="recept-data">
                <div class="col-sm-6 ingredients">
                    <div class="fields-heading">
                        <i class="fa fa-shopping-basket">
                        </i>
                        <strong>Ingrediënten:</strong>
                    </div>                  
                    <div class="datalist">
                    {@onderdelen}
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Voorbereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@voorbereidingstijd}
                    </div>

                    <div class="fields-heading">
                        <i class="fa fa-clock-o"></i>
                        <strong>Bereidingstijd:</strong>
                    </div>
                    <div class="datalist">
                        {@bereidingstijd}
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<hr>

<div class="fields-heading">
<i class="fa fa-file-o"></i>
<strong>Bereidingswijze:</strong>
</div>

据我所知引导程序已加载。我确实在页面源代码中看到了它。

我尝试实现的屏幕截图：

这就是我到目前为止所得到的：

有什么想法吗？