There seems to be some weird extra space between my last menu item and the button in the navigation, that makes the navigation look a tad left aligned rather than centered. It becomes even more obvious when you reduce the browser width.
That’s a workaround that shouldn’t be necessary. I would expect that the navigation is centered without extra margin to the right side when I select the centered option.
I think the page links are centered on the total width rather than the space between logo and button. The extra space is because the logo is bigger than the button hence the need to adjust the margins. That seems, to me, to be a reasonable and flexible approach given the different options available in the component.
@pumpkin I have made the same observations like you. It’s not that the navigation is not centered, it is centered in its middle “container”. But the two “container” to the left and the right have a different content.
Your Logo is rather wide and your button is rather small. In your case there is space left of the Button as the “container” does not adopt to the size of your Button and therefore you recognise it.
You can currently only solve the problem with workarounds, but you are absolutely right, the component should do it correct.
If you wanted more control, and your navigation is single level, I’d suggest making your own navigation with the built-in components (flex, top pages, etc) that way you can position things exactly as you want.