title: CSS Navbar item wont align right
body: <p>Here is the html code in which I want login and sign up to be aligned towards the right of the navbar</p>
  
  <p></p>
  
  <pre><code>&lt;navbar class="navbar"&gt;
      &lt;div class="content"&gt;
  &lt;a class="navbarbrand" href="#"&gt;Brand&lt;/a&gt;
  &lt;div class="navbaritemcon"&gt;
      &lt;a href="#" class="navbaritem"&gt;Home&lt;/a&gt;
      &lt;a href="#" class="navbaritem"&gt;About Us&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="navbaritemcon right"&gt;
      &lt;a href="#" class="navbaritem"&gt;Login&lt;/a&gt;
      &lt;a href="#" class="navbaritem"&gt;Sign Up&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/navbar&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:-</p>
  
  <p>Tried using float option but doesnt work either</p>
  
  <pre><code>.navbar{
      background-color: #17a2b8;;
      width: 100%;
      height: 40px;
      display: flex;
      padding-left: 1rem;
      padding-right: 1rem;
      position: sticky;
      align-items: center;
  }
  
  .navbar&gt;.content{
      display: flex;
      align-items: center;
  }
  .content{
      position: relative;
      padding-top: 8px;
      padding-bottom: 8px;
      max-width: 100%;
      min-width: 80%;
      margin-right: auto;
      margin-left: auto;
  
  
  }
  
  .navbarbrand{
      display: inline-block;
      color: white;
      font-weight: 700;
      font-size: 1.5rem;
      text-decoration: none;
      margin-right: 1rem; 
      position: relative;
  }
  
  .navbaritemcon{
      list-style: none;
      float: left;  
  
  }
  
  .navbaritem{
      font-size: 1rem;
      color: white;
      display: inline-block;
      font-weight: normal;
      text-decoration: none;
      margin-right: 1rem;
      margin-left: 1rem;
  }
  
  .right{
      justify-content: flex-end;
  }
  </code></pre>
  
  <p>How do I make login and signup appear aligned towards the right of the navbar. Please help not able to figure out the correct way of doing it</p>
  
  <hr>