From Float to Flexbox navigation layout problem

Hi there!

I searched for answers in the forum and online but the solution given doesnt work for me so here I am.

Our main menu has 4 entries, 3 are aligned to the left, and the last one is supposed to be aligned on the right (next to the search icon).
I just switched to flexbox and can't seem to make it work.
Previously I was using float: right to make the 4th item "contact us" aligned to the right. With flexbox, I read that I should use margin-left: auto, however it doesn't work, I don't understand why.

I also saw this documentation you made "In the flex version, this class no longer exists. Instead, you should use the [insert link here] generate_menu_bar_items hook to add “menu items” that don’t belong next to the real menu items."
but I don't understand it lol..

Hope you can help out!
Cheers