title: Can't get justify-content: space-between to work in Bootstrap framework
body: <p>How can I get the below snippet to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/br9Ml.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/br9Ml.jpg" alt="enter image description here"></a></p>
  
  <p>So that the items are evenly spaced, and the first item has no empty space on the left &amp; the last item has no empty space on the right. Similar to what MS Word can do:</p>
  
  <blockquote>
    <p>Full-justification</p>
    
    <p>All lines in a paragraph are expanded so they are neat against both
    the left and right margins.
    To expand the line, space has to be added, between words and
    characters, to fill out the line.</p>
  </blockquote>
  
  <p>In the code snippit below, there is lots of purple space to the left of the first item, I want to remove this.</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-css lang-css prettyprint-override"><code>ul {
    list-style: none;
    background-color: rebeccapurple;
    color: white;
    margin: 55px 10px;
    display: flex; 
    // align-items: stretch;
    justify-content: space-between;
  }
  li {
    padding: 0;
    background-color: #6495ed;
  }
  li:nth-of-type(2n) {
    background: lightslategrey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;ul class="nav navbar-nav"&gt;
   &lt;li&gt;Item&lt;/li&gt;
   &lt;li&gt;Item&lt;/li&gt;
   &lt;li&gt;Item&lt;/li&gt;
   &lt;li&gt;Item&lt;/li&gt;
   &lt;li&gt;Item&lt;/li&gt;
   &lt;li&gt;Item&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>UPDATE</h2>
  
  <p>@kukkuz answer below solves the snippit but I also had to add the below to get it to work with twitter Bootstrap.  Bootstrap was adding <code>:before</code> &amp; <code>:after</code> elements that were messing things up for me. </p>
  
  <p><a href="https://i.stack.imgur.com/o7gzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o7gzN.png" alt="enter image description here"></a></p>
  
  <p>Removing them got it working for me, but I would recommend using a more specific selector that <code>ul</code> otherwise you could mess things up with Bootstrap.</p>
  
  <p>FYI -  I was using Bootstrap from this CDN, v3.3.7:
  <a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css" rel="nofollow noreferrer">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css</a></p>
  
  <pre><code>ul:before { 
      content: none;
  }
  ul:after {
      content: none;
  }
  </code></pre>