title: Bootstrap Navbar with Logo on Left and Items on Right
body: <p>My navbar items are not aligning to the right even though I have added the class "navbar-right" to the ul tag. What am I doing wrong?</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark justify-content-between"&gt;
  &lt;div class="container"&gt;
  
          &lt;div class="navbar-header"&gt;    
      &lt;a class="navbar-brand" href="#"&gt;&lt;strong&gt;My Name&lt;/strong&gt;&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;&lt;/div&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;About 
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/wongwy/pen/VMQgeJ" rel="nofollow noreferrer">https://codepen.io/wongwy/pen/VMQgeJ</a></p>