How can I center a Navbar in react-bootstrap

Question

I am hoping that this is a simple question, and I see that some folks have asked a similar question about bootstrap. I haven't been able to work one of those answers into a solution that works for me, and I think there may be a simpler react-bootstrap answer in any case.

Code example is here: https://codesandbox.io/s/yq5jvl9lz9

Here's what it looks like, when the viewport is wide enough:

Here's more-or-less what I want:

Your help will be greatly appreciated! Thanks, Nat

EDIT 12/22/18: Starting with the information from @Cristian below, I modified the example. I needed display: inline-block in addition to width: 100%. Unfortunately, at larger screen sizes, the "brand" is now mis-aligned with the menu items:

Any other fixes appreciated! I have posted this as a fresh question, so answers can go there (and points for accepted answer!)

Answer 1

I think className='m-auto' at Nav is enough

Answer 2

I had the same question, and this worked for me:

Add className="justify-content-center" to the parent.

Example:

<Navbar className="justify-content-center">
    <Navbar.Brand/>
</Navbar>