Logo Centered Menu Split breaking at 4k resolution

On this page, I am using this custom code to split the menu left and right of the logo, as per code I found from an enfold Form.
However, on large resolution ( 4k ) The first menu Mega Menu drop down, shows to the far right of the screen. At high resolution, the drop down is essentially half off the screen. Is there newer and better code I should be using?

Current Code below:

/* Split menu around logo
—————-*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:320px;
}

#top #header_main > .container .main_menu .av-main-nav > li > a {
height: 166px !important;
line-height: 200px;
}

#header {
height: 220px; /* Header Height */
}

#header .main_menu {
width: 100%;
left: 48%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
padding-top:55px;

}

#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}

#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 250px;
}
}

#top #wrap_all .header_color.av_header_transparency {
background: rgba(255,255,255,.8)!important;
}

.header_color div {
border:none !important;
}

.logo
{
padding-top:10px !important;
}

@media only screen and (max-width: 1375px) {
#header_main .avia-menu-text {
font-size: 16px !important;
font-family: atten-new,sans-serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
}

.av-main-nav > li > a {
padding: 0 0px;
}

#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:250px;
}
}