title: Stretch menu items horizontally Bootstrap 4 Flexbox
body: <p>I am have an absolute positioned block with a menu inside (3 links).</p>
  
  <p>The markup of my header and menu is:</p>
  
  <pre><code>&lt;header id="header" class="header d-flex justify-content-center align-items-end"&gt;  
    &lt;div class="my-block"&gt;
      &lt;div class="container row"&gt;
          &lt;div class="col-md-8 offset-md-2"&gt;
          &lt;nav class="nav nav-pills flex-column flex-sm-row p-2"&gt;                  
            &lt;a href="#" class="flex-sm-fill text-sm-center nav-link"&gt;Link 1&lt;/a&gt;               
            &lt;a href="#" class="flex-sm-fill text-sm-center nav-link"&gt;Test link 2&lt;/a&gt;
            &lt;a href="#" class="flex-sm-fill text-sm-center nav-link"&gt;Another link 3&lt;/a&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>How do I stretch the menu-items horizontally, so it's fills up totally the width of my <code>&lt;div class="col-md-8 offset-md-2"&gt;</code>?</p>