Navigation bar – consistent spreading of the menu items in 2 line menu

Hi!
I have a problem with the spacing of the menu bar items. The whole navigation is centered, the first line of the menu is filled with 8 menu buttons, the second line is filled with 6 menu items. The spacing in the second line looks a bit weird – to much space between the menu buttons. . How can i add a specific width to the navigation bar, so that the spacing is more consistent/naturale? Is there a way to define a specific width to the first line of the navigation bar to get kind of a line break?

Following code has already be added in Quick CSS

following code to Quick CSS in Enfold theme options > General Styling

.html_header_top.html_logo_center #header_main_alternate .main_menu ul:first-child {
display: flex;
flex-flow: wrap;
}
.av-main-nav li {
flex-grow: 1;
}

/* Activate burger menu */
@media only screen and (max-width: 1040px) {
#top #header .av-main-nav > li.menu-item {
display: none!important;
}
#top #header .av-burger-menu-main {
cursor: pointer;
display: block!important;
}}

Thanks in advance,
Juergen