Centering Rollovers on Mobile

Site URL: http://cclglobal.org

Hi! I can't figure out how to get my 4 rollovers on the home page to center on mobile. They are circle graphics under Forum Member Experience.

I added this CSS:

{
   background-color: #aeaeae;
}

#img-hover1 { 

   background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c58762232b8617bcbd39b/1596741750873/CCL_icon_peer1.jpg');

    height: 100px;

    width: 100px;

    background-size:contain; }

#img-hover1:hover {

    background-image: url('https://static1.squarespace.com/static/5effad5a19ba7176bb954f8e/t/5f2c587cc963ae176b5f4a95/1596741756609/CCL_icon_peer2.jpg');

And then used this code on the page:

<a href="https://cclglobal.squarespace.com/forum-member-experience/#forum"><div style="width:100%;text-align:center;background-repeat:no-repeat;" id="img-hover1"></div></a>

Thank you in advance for helping me!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f160e798fd50a4d36a58bcb .code-block * {
    text-align: center;
    margin: 0 auto;
    background-position: center;
}
}

Thank you! Worked perfectly!