Logo centered and menu left and right

Hello Enfold team,

I tried to use the enfold solution to have a centered logo and a menu left and right. This is the code is used:

/* Split menu
—————-*/

@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:150px;
}

#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

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

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

The Problem is, that the logo gets shrinked with this solution.
Because of that I tried:

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

Now the logo has the right size but it overlays the menu items.

I would like to have a large logo and the menu items on the very right and left.

Greetings
Felix