title: how can I make elements justify-content-between
body: <p>I want to separate between two elements one most right and the other most left
  I try to use justify-content-between
  but doesn't work I don't know why</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;post-left d-sm-flex justify-content-between&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class=&quot;post-author&quot;&gt;
                  &lt;div class=&quot;avatar avatar-online avatar-xs&quot;&gt;
                      &lt;a href=&quot;doctor-profile.html&quot;&gt;&lt;img src=&quot;assets/img/doctors/doctor-thumb-01.jpg&quot; class=&quot;avatar-img rounded-circle&quot; alt=&quot;Post Author&quot;&gt;
                          &lt;span&gt;username&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class=&quot;h4 &quot;&gt;&lt;i class=&quot;fas fa-money-bill-alt money&quot;&gt;&lt;/i&gt;400 $&lt;/li&gt;                                                       
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>style</p>
  <pre><code>.post-left ul {
  
      list-style: none;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: inherit;
  }
  
  .post-left ul li {
      color: #15558d ;
      margin-bottom: 5px;
      margin-left: 10px;
      
  }
  
  </code></pre>