title: How can I center a Navbar in react-bootstrap
body: <p>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.</p>
  
  <p>Code example is here: <a href="https://codesandbox.io/s/yq5jvl9lz9" rel="nofollow noreferrer">https://codesandbox.io/s/yq5jvl9lz9</a></p>
  
  <p>Here's what it looks like, when the viewport is wide enough:
  <a href="https://i.stack.imgur.com/bzFWM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bzFWM.png" alt="Navbar as produced by my Codesandbox code"></a></p>
  
  <p>Here's more-or-less what I want:
  <a href="https://i.stack.imgur.com/BHqSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BHqSV.png" alt="What I&#39;m shooting for"></a></p>
  
  <p>Your help will be greatly appreciated! Thanks, Nat</p>
  
  <p>EDIT 12/22/18: Starting with the information from @Cristian below, I modified the example. I needed <code>display: inline-block</code> in addition to <code>width: 100%</code>. Unfortunately, at larger screen sizes, the "brand" is now mis-aligned with the menu items:
  <a href="https://i.stack.imgur.com/9Mn3N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Mn3N.png" alt="misaligned navbar"></a></p>
  
  <p>Any other fixes appreciated! I have posted this as a <a href="https://stackoverflow.com/questions/53900570/">fresh question</a>, so answers can go there (and points for accepted answer!)</p>