How to properly center the footer?

Hi there!

I’ve just started using WordPress for the first time and I’m trying to customize the “Soundboard” theme I purchased. The problem I’m having is the centering of the footer.
In the original theme it’s over the whole page (https://www.themes.red-sun-design.com/?theme=soundboard). This is the code I’ve found in the style.css:

#footer  {
        width: 100%;
        margin-top: 40px;
        overflow: hidden;
        position:absolute;
        bottom: 0;
        } 

#footerwrapper {
        width: 960px;
        margin: -20px auto 0 auto;
        padding: 0;
        padding-bottom: 20px;
        overflow: hidden;
        }

Now what I want is for the footer to be in the center with some social icons in it. This is where I’m at right now: https://www.mes-records.com
I’ve changed the code to this:

#footer  {
        width: 25%;
        margin: -135px auto 0;
        border: 1px solid #393939;
        bottom: 0;
        }

The footerwrapper was left untouched.

With a full window on a computer this is basically what I want, but on mobile devices it looks absolutely terrible. You can also see this when you make the browser window smaller. The icons become a huge mess and the top margin is far too big.

Does anyone have any idea how I can make this prettier? I’m not that good with CSS and I’m just trying out different things, so I don’t know where to look.

Thanks!