title: Center flex items with one at the end of the row
body: <p>I am creating a navbar with <code>flexbox</code>. Here is my <code>html</code>:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;Project&lt;/div&gt;
      &lt;div&gt;About the Project&lt;/div&gt;
      &lt;div&gt;Contact Us&lt;/div&gt;
      &lt;div&gt;Mailbox&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my <code>css</code>:</p>
  
  <pre><code>.container {
    display: flex,
    justify-content: center
  }
  </code></pre>
  
  <p>Here is what it currently looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/smaNy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/smaNy.png" alt="Current Navbar"></a></p>
  
  <p>I want the <code>mailbox</code> <code>div</code> to be at the end of the <code>flex container</code>.  I want it to look more like this.</p>
  
  <p><a href="https://i.stack.imgur.com/RY49e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RY49e.png" alt="Wanted navbar"></a></p>
  
  <p>I have tried <code>flex-end</code> on that flex item to no avail.  What do I need to do to make that happen?</p>