Bootstrap 3 - Сетка не выравнивается должным образом

Question

Я создаю сайт своего портфолио на Bootstrap 4. Я применил скользящую подпись javascript (измененную из источника в Интернете) для наложения миниатюр. Все работает отлично (за исключением того, что поле заголовка слишком далеко выходит ...), но когда я начал использовать это, левый край, где начинаются мои миниатюры, перемещается вправо, и я не могу понять, что вызывает проблему. Я пытался понять это часами. Все, что вызывает его, не вызвано моим пользовательским CSS, потому что я попытался удалить все это, и он все еще был странно выровнен.

Другое дело, что я пытаюсь сделать, это эскизы плиточные прямо против друг друга, но я не могу понять, как избавиться от их рентабельности/дополнения ...

Here's a link в облегчить его проверку. Большое спасибо заблаговременно, это очень значило бы для меня, если бы я мог заставить это работать.

SO жаль за грязный код, я собираюсь очистить его, как только я получу этот материал.

EDIT: Я не знаю, почему, или как .. но проблема выравнивания была вызвана классом 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%; ******** 
}