Bootstrap 3 - 网格未正确对齐

Question

我正在Bootstrap 4上创建我的投资组合网站。我已经实现了一个滑动的javascript标题（从在线调整源码）来覆盖缩略图。一切正常（除了标题框延伸得太远了......），但是当我开始使用它时，我的缩略图开始的左边缘向右移动，我无法弄清楚导致问题的原因。我一直试图弄清楚它几个小时..不管是什么导致它不是由我的自定义CSS引起的，因为我试图将它全部删除，它仍然奇怪地对齐那里。

我要做的另一件事就是将缩略图平铺在彼此之间，但我无法弄清楚如何摆脱他们的边距/填充......

Here's a link让我们更容易查看它。非常感谢，如果我能让它发挥作用，对我来说真的很重要。

对于凌乱的代码感到抱歉，一旦我开始工作，我就会把它清理干净。

编辑：我不知道为什么，或者如何...但是对齐问题是由UL类引起的。我把它改成了div，现在它完美无缺。

Answer 1

看看你的代码。您已定义宽度两次。使用width:97%;

#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%;   ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%;    ********
}