Logo Squished on Mobile View

Hi! I'm using a template with a lot of custom code, and I know some basic CSS. I made a code change because the social media icons weren't working (below is the code change I added), and now the logo is squished on mobile. What changes can I make so it's not squished on mobile and the social media icons work on desktop? Link to site

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-title {
    text-align: center;
    flex: 0 0 50%;
}