title: have the same margin top and right between list items
body: <p>I have some list items inside a modal and I want that each list item have the same space or magin between. So Im using margin-bottom: 1rem and margin-right: 1rem, but its not working. For example in larger devices I want to have 3 columns but it appears only two columns with a very large margin in between. Also in medium devices I want 2 columns but with the same margin right and bottom between list items but its not working, the columns have a very large margin in between.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;a  data-toggle="modal" data-target=".bd-example-modal-lg" href=""&gt;Open &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal Title&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
  
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;ul class="categories-list"&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/tags.svg"/&gt;
                  &lt;a class=""&gt;All Options&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/video.svg"/&gt;
                  &lt;a class=""&gt;Option1&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/clubbing.svg"/&gt;
                  &lt;a class=""&gt;Option2&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/concert.svg"/&gt;
                  &lt;a class=""&gt;Option3&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/conference.svg"/&gt;
                  &lt;a class=""&gt;Option4&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/exposition.svg"/&gt;
                  &lt;a class=""&gt;Option5&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/certificate.svg"/&gt;
                  &lt;a class=""&gt;Option6&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="col-lg-4 col-md-6 col-sm-12"&gt;
                  &lt;img src="{{ URL::to('/') }}/img/categories/literature.svg"/&gt;
                  &lt;a class=""&gt;Option7&lt;/a&gt;
                &lt;/li&gt;
  
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.categories-list{
    display: flex;
  
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
  }
  .categories-list li{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: yellow;
    border-radius: 5px;
    margin-right: 1rem;
  }
  
  .categories-list    img{
    width: 20px;
    height: 20px;
  }
  </code></pre>