Please add these styles under media query, issue is with unwanted margin you were using to style the images to middle.

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

and remove

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

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

I have a column where the images are aligned in the center when it is locally seen when I hosted the alignment of the images changed

This is the image when it is locally hosted

and this is the remote host image

This is the code I have tried

<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_denpaymentvivox.jpeg" alt="">
        </li>
        <li>
            <img class="secure" src="rummy_denpaymentsecure.jpeg" alt="">
        </li>
    </ul>
</div>

This is the CSS part of that section

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;
    }
}

Where did I go wrong?

update: it is perfect when I viewed in the desktop all the dimensions as shown below

But when I check in my mobile it is not aligned as shown in image