title: Correctly center Navitems
body: <p>So at the moment my Nav Items are centered by Margin, but this only works correctly when the Items are of same size, which they are not. How can i center it correctly?</p>
  <pre><code>&lt;Navbar bg={ transparent ? &quot;&quot; : &quot;dark&quot;} variant=&quot;dark&quot; expand=&quot;md&quot; fixed=&quot;top&quot;&gt;
    &lt;Container fluid&gt;
      &lt;Navbar.Brand href=&quot;/&quot;&gt;Logo&lt;/Navbar.Brand&gt;
      &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
      &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
        &lt;Nav className=&quot;ms-auto d-flex w-100 align-items-center justify-content-center&quot;&gt;
          &lt;Nav.Item className=&quot;ms-md-auto&quot;&gt;
            &lt;Nav.Link className={textColor} href=&quot;/about&quot;&gt;
              About
            &lt;/Nav.Link&gt;
          &lt;/Nav.Item&gt;
          &lt;Nav.Item&gt;
            &lt;Nav.Link className={textColor} href=&quot;/blog&quot;&gt;
              Blog
            &lt;/Nav.Link&gt;
          &lt;/Nav.Item&gt;
          &lt;Nav.Item&gt;
            &lt;Nav.Link className={textColor} href=&quot;/writeups&quot;&gt;
              Writeups
            &lt;/Nav.Link&gt;
          &lt;/Nav.Item&gt;
          { 
          (Object.getOwnPropertyNames(userProfile).length === 0) &amp;&amp;
  
            &lt;Nav.Item className=&quot;ms-md-auto&quot;&gt;
              &lt;Nav.Link className={textColor} href=&quot;/sign-up&quot;&gt;
                Sign Up
              &lt;/Nav.Link&gt;
            &lt;/Nav.Item&gt;
          }
          { 
          (Object.getOwnPropertyNames(userProfile).length === 0) &amp;&amp;
  
          &lt;Nav.Item&gt;
            &lt;Nav.Link className={textColor} href=&quot;/sign-in&quot;&gt;
              Sign In
            &lt;/Nav.Link&gt;
          &lt;/Nav.Item&gt;
          }
          {
            (Object.getOwnPropertyNames(userProfile).length !== 0) &amp;&amp;
  
            &lt;Nav.Item className='ms-md-auto text-align-center' id='123'&gt;
              &lt;Nav.Link 
                className={textColor.concat(&quot; btn&quot;)} 
                href={&quot;/profile/&quot; + String(userProfile.id)}
              &gt;
                &lt;img 
                  style={{height: '35px', borderRadius: '30px'}}
                  src={'http://localhost:8000' + userProfile.avatar}
                /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;{userProfile.username}
              &lt;/Nav.Link&gt;
            &lt;/Nav.Item&gt;
          }
  
        &lt;/Nav&gt;
      &lt;/Navbar.Collapse&gt;
    &lt;/Container&gt;
  &lt;/Navbar&gt;
  </code></pre>
  <p>The Logo and Heading below the Navbar are centered, but the middle nav items arent.</p>
  <p><a href="https://i.stack.imgur.com/uVzJ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVzJ1.png" alt="enter image description here" /></a></p>