Fit footer widgets inside viewport mobile

Hi,

I am using the Astra theme (free). My website looks good on mobile except the footer widgets do not fit inside the viewport on mobile devices. Rather than being centered and full-width, they are cut off and float slightly right. I found this code on the web. How do I adjust it to make all footer widgets fit inside the viewport on smaller screens?

Here are two separate lines of code.

Code 1:

    @media (max-width: 768px) { /* Adjust breakpoint as needed for mobile devices / / Styles for the entire footer widget area / .footer-widgets { padding: 15px; / Add some padding around the widgets / overflow-x: hidden; / Prevent horizontal scrolling if content overflows */
}

/* Styles for individual footer widgets */
    .footer-widgets .widget {
        margin-bottom: 20px; /* Add space between widgets */
        width: 100%; /* Make widgets take full width on mobile */
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }

    /* Example: Adjust font sizes for readability on mobile */
    .footer-widgets .widget-title {
        font-size: 1.2em;
    }

    .footer-widgets .textwidget {
        font-size: 0.9em;
    }
} 

Code: 2

@media (max-width: 768px) {
    .footer-widgets .menu {
        list-style: none;
        padding: 0;
        text-align: center; /* Center menu items */
    }

    .footer-widgets .menu li {
        margin-bottom: 10px;
    }
}

The page I need help with: [log in to see the link]