After 3 years of development experience and great skills in CSS i got this problem)

Here’s the explanation:

I have header in my react application and there’s a 3 siblings, logo with search, navigation and user-buttons, and I need to center navigation just at the middle of the screen.

Navigation not in the middle of the screen

Active input dispose it even far ass expected

And this what I expect even with opened input
Do someone know the solution with this ‘banal’ question?)

I cant do that with justify-content: space-between because logo and buttons different in its width, I’ve also tryed grid with 1fr auto 1fr and etc, but its breaks on adaptation.