Как адаптировать списки ul?

Ребят, прошу Вас, помогите решить проблему на смартфонах. Пытаюсь отцентрировать элемент относительно экрана пользователя, но ничего не выходит. Делаю на бутстрапе 4. Max-width: 576px;

HTML

<nav>
<ul class="headings animated">
<li class="headings__item text-center float-left"><a href="catalog-pilaf.html"><img src="img/bg-pilaf.png" alt="Pilaf">Pilaf</a></li>
<li class="headings__item text-center float-left"><a href="catalog-salad.html"><img src="img/bg-salad.png" alt="Salad">Salad</a></li>
<li class="headings__item text-center float-left"><a href="catalog-sauces.html"><img src="img/bg-sauces.png" alt="Sauces">Sauces</a></li>
<li class="headings__item text-center float-left"><a href="catalog-beverages.html"><img src="img/bg-beverages.png" alt="Beverages">Beverages</a></li>
</ul>
</nav>

CSS

.headings {
width: 100%;
margin: 50px auto;
}

.headings__item {
margin-left: 0;
margin-right: 0;
}

.headings__item:first-child {
width: 36%;
    margin: 0px auto;
}

.headings__item:nth-child(2) {
    margin-left: 0;
    width: 36%;
    margin-top: 196px;
    margin-right: 100px;

}

.headings__item:nth-child(3) {
    margin-left: 0px;
    width: 41%;
    margin-top: 196px;
    margin-right: 100px;
}

.headings__item:last-child {
    margin-right: 0px;
    width: 49%;
    margin-top: 198px;
}

Выложите куда-то по типу ссылка все, тогда посмотрю - может подскажу. )

crus94, pilafproject.com  Зайдите в каталог и опуститесь ниже до того момента как увидите товар. Там будет 4 пункта Pilaf, Sala, Sauces, Beverages. Сделайте размер экрана 320-568 и вы увидите проблему 
crus94, та же самая петрушка со слайдерской кнопкой "Buy Now" слайдер сам выравнивается резиново, а кнопка нет. Слайдер в котором титулка Sushi at a super price, его смотрите в Каталоге