Not working anymore - Center Align Social Links Icons on Mobile Code

Hi all,

I'm trying to center the social link Icons only in mobile with code. 
Up until 2 days ago this worked perfectly with the following code:

@media screen and (max-width:640px) {
div#block-8848eabd2318998ac7f2 * {
    text-align: center !important;
}
}

I once tried this code, which also worked: 
 

/* Right alignment for desktop */
div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
  text-align: right;
}

/* Center alignment for mobile devices */
@media only screen and (max-width: 640px) {
  div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
    text-align: center !important;
  }
}

However, as of two days ago, the icons will not center anymore on mobile using this code.
I've deleted the whole page and rebuilt it. I've tried new templates with the same code.
I've searched various tutorials and applied the codes provided.
Text is affected, but the icons remain unaffected.

What am I missing?

Thanks for any help provided.

Link: https://ravens-2.squarespace.com
Password: Ravens-1

Edit: Chatgpt just helped me with this code and it works half ways:

/* Right alignment for desktop */
div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
}

/* Center alignment for mobile devices */
@media only screen and (max-width: 640px) {
    div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
        justify-content: center; /* Centers items */
    }
}

Result: It's now at least semi-centered but not perfectly
 

Example 1: Centered with Code

Example 2: Centered traditionally 

It's subtle but still noticeable.

To make it work perfectly centered I need to add the following code and I can't imagine this is the correct way to do it: 

@media only screen and (max-width: 640px) {
    div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list {
        display: flex;
        justify-content: center;
        transform: translateX(-6px); /* Adjust as needed */
    }
}

__________________________________________________________________________

Second: 

Just out of curiosity, why does the other solution not work anymore?
There are multiple forum posts, pointing to this solution. Also with me it worked perfectly up until 2 days ago.
Did Squarespace change something?
I tried everything, even created a completely new Squarespace account and followed the guidelines posted below to the dot without results.

Here are some examples pointing to the solution that previously worked but now not anymore: 

 https://www.risingtidecreatives.com/blog/center-align-text-buttons-mobile-squarespace

etc.

Don't remove your code. Use this code under

@media screen and (max-width:767px) {
div#block-8848eabd2318998ac7f2 .sqs-svg-icon--list a {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
}