выравнивание изображения при размещении на сайте

Question

У меня есть столбец, где изображения выровнены по центру, когда он виден локально, когда я размещал, изменилось выравнивание изображений

Это изображение, когда оно размещено локально

и это образ удаленного хоста

Это код, который я пробовал

<div class="col-lg-3 col-md-12 px-sm-0 px-4 w3_agile-footer1 f3 powered">
    <h5 class="mb-3">Powered By</h5>
    <ul class="tweet-agile" style="list-style: none; text-align: center;">
        <li>
            <img class="vivox" src="rummy_den\payment\vivox.jpeg" alt="">
        </li>
        <li>
            <img class="secure" src="rummy_den\payment\secure.jpeg" alt="">
        </li>
    </ul>
</div>

Это CSS часть этого раздела

ul.tweet-agile span.fab {
    width: 25px;
    color: pink;
    padding-left: 0;
}
.tweet-agile {
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    margin-left: 12px;
}
@media (min-width:425px) {
    .tweet-agile {
        margin-left: 63px !important;
    }
}

@media (min-width:375px) and (max-width:425px) {
    .tweet-agile {
        margin-left: 75px !important;
    }
}

Где я go ошибся?

обновление: идеально, когда я смотрел на рабочем столе все размеры, как показано ниже

Но когда я проверяю свой мобильный телефон, он не выравнивается, как показано на рисунке

Answer 1

Пожалуйста, добавьте эти стили под медиа-запрос, проблема связана с нежелательным полем, которое вы использовали для стилизации изображений к середине.

@media (min-width: 425px){
  .tweet-agile {
    height: 100px;
    width: 100px;
    width: 100%;
    padding: 0;
    margin-left: 0;
   }
  .tweet-agile img {
    margin-left: 0 !important;
   }
}

и удаление

@media (min-width:425px) {
    .tweet-agile {
        margin-left: 63px !important;
    }
}

@media (min-width:375px) and (max-width:425px) {
    .tweet-agile {
        margin-left: 75px !important;
    }
}