Centering header buttons while not making them static/absolute

The logo is always at the left, the small buttons always at the right, and the menu buttons in the middle. I gave the logo left: 0, the menu buttons using the code below this text, and the small buttons right: 0.

left: 50%;
transform: translateX(-50%);

What I want to happen: The buttons in the middle are always centered until one of the things at the side (the logo or the small buttons) pushes it somewhere else. When the bar gets way too small everything gets pushed off at the right, but this only happens when all white space is filled up. (At this point my mobile layout will activate)

Is there some option in flex I missed? Or is there a better way to solve this problem?

EDIT: A friend suggested I add an invisible element to the small buttons on the right, which is exactly wide enough to keep the middle buttons in the center. Altough this works, it still has SOME whitespace because of the invisible element.