Centering Footer Images In Responsive Mode

I have spent much too much time, and tried just about everything today to try and get two images in my footer to center in responsive portrait mode. The footer is set up with 5 columns – which look great on a desktop: https://ibb.co/tsntFz8

But when the page is in portrait mode, the images in the first and last column will not center: https://ibb.co/0qwmMmp

I tried every trick I could think of and a few mentioned on these boards, but nothing is working. Please help!

Here is ALL the CSS code being used in the footer:

/*—————————————-
// FOOTER
//————————————–*/

#top #footer .av_one_fifth {
width: 16.5%;
margin-left: 2%;
}

#top #footer > .container > .av_one_fifth:first-child {
margin-right: 3%;
width: 20%;
}
#top #footer > .container > .av_one_fifth:last-child {
width: 12%;
margin-left: 1%;
}

@media only screen and (max-width: 767px) {
#top #footer .av_one_fifth {
width: 90%;
}
#top #footer > .container > .av_one_fifth:first-child {
width: 90%;
padding-top: 10px;
}
#top #footer > .container > .av_one_fifth:last-child {
width: 60%;
}
#footer .widget {
margin: 10px 0 0 0!important;
text-align: center;
font-size: 1.1em!important;
line-height: 1.5em!important;
}
#footer .textwidget p {
text-align: center;
}
#footer h3.widgettitle {
text-align: center!important;
}
#footer .widget img {
display: table;
margin: 0 auto;
}
}

You’ll see that I have #footer .widget {margin: 10px 0 0 0!important;} to close up the spacing between containers. Removing it didn’t help with the final class #footer .widget img {display: table; margin: 0 auto;}.