title: Bootstrap 4: Dropdown menu is not right-aligned when inside nav.navbar
body: <p>Latest Boostrap 4 and popper.js as of time of writing are loaded from CDN.</p>
  
  <p><a href="https://codepen.io/tmrczk/pen/pWLXbO" rel="noreferrer">Codepen here</a>.</p>
  
  <p><strong>Problem</strong>.</p>
  
  <p>My dropdown code:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;This dropdown's menu is right-aligned&lt;/button&gt;
      &lt;div class="dropdown-menu dropdown-menu-right"&gt;
          &lt;button class="dropdown-item" type="button"&gt;Action&lt;/button&gt;
          &lt;button class="dropdown-item" type="button"&gt;Another action&lt;/button&gt;
          &lt;button class="dropdown-item" type="button"&gt;Something else here&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am positioning it inside <code>&lt;nav class="navbar"&gt;</code> and it is flushed right:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&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 class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
      &lt;div class="btn-group ml-auto"&gt;
          &lt;button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Welcome&lt;/button&gt;
          &lt;div class="dropdown-menu dropdown-menu-right"&gt;
              &lt;button class="dropdown-item" type="button"&gt;Action&lt;/button&gt;
              &lt;button class="dropdown-item" type="button"&gt;Another action&lt;/button&gt;
              &lt;button class="dropdown-item" type="button"&gt;Something else here&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The problem is that when you click "Welcome", the drop-down goes outside the right edge of the screen, despite <strong>dropdown-menu-right</strong> class on it.</p>
  
  <p>Solution proposed <a href="https://stackoverflow.com/questions/46458645/dropdown-menu-with-the-dropdown-menu-right-class-does-not-align-to-the-right">here</a> does not work ({margin:0} does not help).</p>
  
  <p><strong>Question</strong>.</p>
  
  <p>How do I make sure that drop down does not go outside the right edge of the screen?</p>
  
  <p>Thanks!</p>