title: Why I should use after display none for justify-content:space-between?
body: <pre><code>&lt;header class="navbar navbar-default"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50"&gt;
        &lt;/a&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"&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;/div&gt;
      &lt;nav id="navbar-menu" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active"&gt;&lt;a href="#about"&gt;About &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>if i remove</p>
  
  <pre><code>.navbar-default .container:before, .navbar-default .container:after {
    display:none
  }
  </code></pre>
  
  <p>in my css</p>
  
  <pre><code>.navbar-default {
    background-color: #722872;
    border: none;
    border-radius: 0;
    height: 80px;
  }
  
  .navbar-default .container {
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:space-between;
  }
  
  .navbar-default .container:before, .navbar-default .container:after {
    display:none
  }
  
  .navbar-brand {
    height: 80px;
  }
  
  .navbar-brand img {
    max-height: 50px;
  }
  
  nav .navbar-nav li a {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  </code></pre>
  
  <p>I will get this result</p>
  
  <p><a href="https://i.stack.imgur.com/kLxdl.png" rel="nofollow"><img src="https://i.stack.imgur.com/kLxdl.png" alt="enter image description here"></a></p>
  
  <p>instead of
  This Result:</p>
  
  <p><a href="https://i.stack.imgur.com/6bSjD.png" rel="nofollow"><img src="https://i.stack.imgur.com/6bSjD.png" alt="enter image description here"></a></p>
  
  <p>I try figure it out but can't find the answer, thank you.</p>