Html 引导对齐行宽度

我有一个基本的布局，上面有一个英雄形象，上面有文字，下面有3列。为什么我的利润率与主要英雄形象不符？我用的是液体容器，但我试过的所有东西都不能让它们排成全宽

我知道Row类的左边和右边的边距都是-15px。然后容器左右各有一个15px的余量，这应该相互抵消为0

我不确定这是否可行，但我需要将3列均匀地隔开，这样就不会有任何东西相互碰撞，而是保持视口的全宽

链接到小提琴

.nav.col-sm-4{
左侧填充：5px；
右侧填充：5px；
}

你在找。。。。您需要添加媒体查询以删除和添加第二和第三分区容器的填充。是！非常感谢。我试图让所有的东西都跨越整个视口。谢谢你的帮助@Shiladitya唯一一件我不能完全正确的事情是3列有正确的10px填充。第一个看起来多了一到两个像素。。有什么建议吗？请指定图像标签的高度，这将解决第2列和第3列的高度问题。