Middle split menu logo centered but not linking to homepage

I followed several of the support entries to get at a centered split menu setup I like on this development site, however the logo seems to be stacked too low as it doesn’t hotlink until in a smaller mobile browser – when on a large screen it doesn’t appear to link.

/*————————*/
/* CSS – Logo center 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(2) {
/* Adjust the width of the logo */
margin-right:300px;
}

#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(-70%);
}

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

Happy to provide login details if that helps.

Thanks in advance!