Centered split menu center logo

Hi, In the documentation and support threads I found some code to center the logo between the menu navigation

My navigation is uneven. I need 4 items on the left and 4 on the right with the logo centered.

Current code

 /*------------------------*/
/* 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: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: 170px;  
}
}

@media only screen and (min-width: 780px) {
  .logo, .logo a {
    height: 170px;
  }

  #top #header .av-main-nav li:nth-child(2) {
    margin-right: 250px;
  }

  #top #header span.logo {
    position: absolute;
    bottom: -80px;
  }
}