title: justify-content: space-between failing to align elements as expected
body: <p>I needed to use flexbox to center my navigation and hence I came up with the following:</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>.navbar-brand &gt; img {
    width: 100px;
  }
  .navbar-default {
    background-color: #fff;
    border-color: #fff;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
    color: #464646;
    text-transform: uppercase;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus,
  .navbar-default .navbar-nav &gt; li &gt; a:active {
    color: #727272;
  }
  .navbar-default .navbar-nav &gt; li:not(.active) &gt; a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 1px;
    background: #ed1c24;
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover:before {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  .navbar-default .navbar-nav &gt; li:first-child &gt; a {
    font-weight: 700;
  }
  .navbar-default .navbar-nav &gt; li.active &gt; a {
    background: #ed1c24;
    color: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
  .navbar-default .navbar-nav &gt; li.active &gt; a:hover,
  .navbar-default .navbar-nav &gt; li.active &gt; a:focus,
  .navbar-default .navbar-nav &gt; li.active &gt; a:active {
    background: #e0222a;
    color: #fff;
  }
  .navbar-default .navbar-nav &gt; li.active:hover &gt; a:after {
    bottom: 0;
  }
  .navbar-default .navbar-nav &gt; li.active &gt; a:after {
    font-family: FontAwesome;
    content: '\f078';
    position: absolute;
    bottom: 5px;
    font-size: 0.6em;
    /*opacity: 0.8;*/
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
  /* use flexbox to center align nav elements above 992px */
  
  @media (max-width: 992px) {
    .navbar-default .navbar-nav &gt; li &gt; a {
      text-align: center;
    }
    .navbar-collapse {
      max-height: 350px;
      overflow-y: hidden;
    }
  }
  @media (min-width: 992px) {
    .navbar-default {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .navbar-default {
      min-height: 100px;
    }
    .navbar-default .navbar-right {
      display: flex;
      align-items: center;
    }
    .navbar-default &gt; .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;nav role="navigation" class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a href="index.html" class="navbar-brand"&gt;
          &lt;img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- Collection of nav links and other content for toggling --&gt;
      &lt;div id="navbarCollapse" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="consulting.html"&gt;CONSULTING&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="devices.html"&gt;Medical Devices&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Servises&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;News&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><a href="https://jsfiddle.net/7xL3ph5L/1/" rel="noreferrer">FIDDLE HERE</a></strong></p>
  
  <p>As you can see from the HTML , the <code>.container</code> has two child elements.</p>
  
  <p>I have the following CSS applied to the <code>.container</code> element:</p>
  
  <pre><code>.navbar-default &gt; .container{
          display: flex;
          align-items:center;
          justify-content:space-between;
      }
  </code></pre>
  
  <p>The problem is <code>space-between</code> doesn't make the two child elements of the container to be at the left and right edges of the container. </p>
  
  <p>The behaviour that I want is that the two child elements should be on the left and right edge, this can be achieved using floats, I.E., I float one child to the left and one to the right.</p>
  
  <p>Also if you apply <code>flex-start</code> and <code>flex-end</code> the elements will be pulled to the edge but, with <code>flex-start</code> and <code>flex-end</code>, both elements will be pulled to one side. Hence I need to use <code>space-between</code>.</p>
  
  <p>Can somebody tell me why is <code>space-between</code> not working ? This bug is causing a huge alignment issue on my whole site, please somebody tell me what am I doing wrong.</p>