Centre menu below

give this a try:

@media only screen and (min-width: 990px) { 
  .html_header_top.html_logo_center #top #header_main_alternate .main_menu {
    width: 100%
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-evenly;
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu  .av-main-nav > li > a {
    padding: 0 !important;
    font-size: 19px !important;
  }
}

i guess you will set the header widget to display none on small screens

@media only screen and (max-width: 989px) { 
  #header .widget {
    display: none;
  }
}

by the way: is it intentional that the container width is set to 1130px ?

it is working – and my snippet is working too. But i wouldn’t make that space between your navigation and the first section not by setting up a margin top/bottom on color section. This looks bad on responsive case.
you could have done this:

#header_main_alternate {
  margin-bottom: 40px;
}

because header_main_alternate goes to display: none in responsive case – there will be no distance then between header and main.

By the way : nice to have a response on having success with the code ;)
no thanks is needed but just a success report