title: how use margin auto in flexbox
body: <p>I'm making a navbar.
  but I have problem.
  I want to redirect 2 items to the right
  but 1 of them go right 1 of them go middle
  I cant use float because I use flexbox
  I search to google
  He say use margin auto
  I use margin auto but one of them go middle
  I want both of them go right with small margin between them (link &amp; contacts)</p>
  <p>my HTML code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;try making site&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;node_modules/@fortawesome/fontawesome-free/css/all.css&quot;&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt; Home &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=&quot;#&quot;&gt;projects &lt;i class=&quot;fas fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;open source&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;close source&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt; CV &lt;/a&gt;&lt;/li&gt;
              &lt;li class=&quot;f-right&quot;&gt;&lt;a href=&quot;#&quot;&gt; Contacts &lt;/a&gt;&lt;/li&gt;
              &lt;li class=&quot;f-right&quot;&gt;&lt;a href=&quot;#&quot;&gt;links&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  
  
      &lt;script src=&quot;node_modules/@fortawesome/fontawesome-free/js/all.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>my CSS code :</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  nav {
      background: #F8F8F8;
  }
  
  nav &gt; ul {
      list-style: none;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
  }
  
  nav &gt; ul &gt; li {
      padding: 20px 20px;
      position: relative;
  }
  nav &gt; ul &gt; li &gt; a{
      font-family: sans-serif;
      font-size: 1.25em;
      text-decoration: none;
      color: #777;
  }
  
  nav &gt; ul &gt; li &gt; a:hover {
      color: #333;
  }
  
  nav &gt; ul &gt; .active &gt; a{
      color: #555;
  }
  nav &gt; ul &gt; .active{
      background: #D5D5D5;
  }
  
  nav &gt; ul &gt; li &gt; ul {
      display: none;
      position: absolute;
      list-style: none;
      top: 4.2vh;
      left: 0px;
      width: 103%;
      text-align: center;
  }
  nav &gt; ul &gt; li:hover &gt; ul, nav &gt;ul &gt; li &gt; ul:hover {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
  }
  nav &gt; ul &gt; li &gt; ul &gt; li &gt; a {
      text-decoration: none;
      font-family: sans-serif;
      color: #777;
  }
  
  nav &gt; ul &gt; li &gt; ul &gt; li &gt; a:hover {
      color: #333;
  
  }
  
  nav &gt; ul &gt; li &gt; ul &gt; li {
      padding: 1vh 0.75vh;
      background: #F8F8F8;
  }
  .f-right {
      margin-left: auto;
      margin-right: 20px;
  }
  </code></pre>
  <p>contacts go middle but I want contact go right like link (with small margin)
  Thanks !!</p>