CSS was working, but now is not

Hello,

I had this request once already and it was working, but now it reverted back, even though the css is still in place.

Trying to get the nav bar on this page https://emilyl48.sg-host.com/ to stretch across the width of the screen.

We plugged in this CSS and it was working but then it stopped:

.responsive #header_main_alternate > .container {
max-width: 100%;
padding: 0px 40px 0px 40px;
}
.html_header_top.html_logo_center #top #header_main_alternate .main_menu ul:first-child {
display: flex;
justify-content: space-between;
}

I added !important here
.html_header_top.html_logo_center #top #header_main_alternate .main_menu ul:first-child {
display: flex !important;

And it worked but the sub drop-down menu is now showing up strangely.

What should i do to fix this?