Logo in centre of header issues

Hi.

I followed a thread on here (apologies, I can’t find it now) to set up the header so the logo was centred and the menu was split either side.

It works really well except when the browser window is pulled really wide, when for some reason the right hand menu option jump down under the left hand options (please see screenshots)

This is what I put in the quick CSS section:

 @media only screen and (min-width: 768px) {
#top #header .av-main-nav li:nth-child(2) {
  /* Adjust the width of the logo */
    margin-right:40vw;
}

#header .main_menu {
    /*background: #ffffff;*/
    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: 180px;
}}}}

I don’t remember the issue happening until I changed the max container width – could this be affecting it? (Width is now 1080px.)

Thanks in advance, everyone.