Split Menu – Spacing between Items

Hello,

we are using the Split Menu, coming up with that code:

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

#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;  
}
}

We also set the width to 100%, with that one:

#header #header_main{
    width: 100%;
    max-width: none;
	background-color: rgba(0,0,0,0.5);

}

Now we nees Some Space bewteen the Menu Items, so it looks like:

We can solve it with:

span.avia-menu-text {
    margin-left:calc(70px);
	margin-right:calc(70px);
	text-transform: uppercase;
}

But there it is hard to manage the Responsive style (Margin),

Any better way to solve that problem?

Regards,