title: Bootstrap 4-beta.3 navbar with User Profile dropdown
body: <p>I'm working on having a standard Bootstrap 4 top navbar with search form and "profile" dropdown menu.
  Only problem is the profile dropdown should be all the way right, and what happens is that the dropdown items scroll off the screen to the right.
  Do I only need some margin-right settings to pull it in or am I missing something in my navbar class attribute ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse"
              data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" 
              aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="http://www.bobmazzo.com/wp-content/uploads/2009/07/bobmazzoCD.jpg" width="30" height="30" &gt;
      &lt;/a&gt;
      &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo01"&gt;
          &lt;ul class="navbar-nav mr-auto mt-2 mt-lg-0"&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Patients&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link disabled" href="#"&gt;Reports&lt;/a&gt;
              &lt;/li&gt;
              
          &lt;/ul&gt;
  
          &lt;form id="searchForm" class="form-inline my-2 my-lg-0"&gt;
              &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
              &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
  
          &lt;ul class="navbar-nav "&gt;
              &lt;!-- PROFILE DROPDOWN - scrolling off the page to the right --&gt;
              &lt;li class="nav-item dropdown"&gt;
                  &lt;a href="#" class="nav-link dropdown-toggle" id="navDropDownLink" 
                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                      Profile
                  &lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navDropDownLink"&gt;
                      &lt;a class="dropdown-item" href="#"&gt;Preferences&lt;/a&gt;
                      &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                      &lt;a class="dropdown-item" href="#"&gt;Logout&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
                 
      &lt;/div&gt;
      
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The plunk: <a href="https://plnkr.co/edit/VM1VEbVcTmadljARolaq?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/VM1VEbVcTmadljARolaq?p=preview</a></p>