Nikko helped me with this , referencing ticket #1085695 , he closed ticket before I saw the issue with the other browsers
It Works fine in FireFox and Chrome but not IE11 and Edge…any thoughts ?
===================================================
#header #header_main nav.main_menu {
padding-right: 0;
width: calc(100% – 250px);
}
#header #header_main nav.main_menu .avia-menu,
#header #header_main nav.main_menu .avia-menu #avia-menu {
width: 100%;
}
#header #header_main nav.main_menu .avia-menu #avia-menu {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
========================================================
I found another code snippet here on the forum to add space between the main menu items and it works on all browsers if anyone is interested see below
we can close this ticket.
#top #header .av-main-nav > li {
padding-left: 70px;
padding-right: 70px;
}