Center Logo with Primary Nav on Left and Social Icons on Right

Good afternoon,

I'm trying to make my site's header look like this. Essentially, I am trying to have my logo centered, my primary navigation on the left, and social icons on the right.

Currently, I have the following code as additional CSS from different support threads I've found:

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}
#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}
#site-navigation {
	float: none;
	width: 80%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

.main-navigation .main-nav {
    flex: 1;
}

nav#mobile-header .site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

nav#mobile-header button.menu-toggle {
    margin-left: auto;
}

On a wide enough desktop, this seems to work. However, on a smaller window (and especially on mobile) it just squishes everything together.

My questions are:
1. Do I have the most efficient CSS use to achieve my goals?
2. How do I set up my site to hide the social media on mobile and just have a centered logo and hamburger menu instead of everything squished together?