Trying to center a navbar, the “brand” and the men

Question

I got some help on centering a navbar by posting this question. I can now center the navbar, but when I do so, the "brand" winds up on line above the menu items, on the larger screens.

Sandbox example is here. The small screen with the hamburger menu works fine, but when you go to a large screen, it doesn't. To get to the larger screen, click on

If you comment out the "import "./index.css", you get a left-aligned menu that looks like this, which is what I want (except for the left-aligned part):

With the import, it is centered, but looks like this:

Centered, but now broken into two lines, with the "brand" above the links. Any ideas on how to fix this so that it is centered, but all on the same line as in the upper image? Thanks!