How do I display content cards evenly spaced including margin sides using flexbox

Question

HTML

<section class="cards">

    {% for m in mcontent %}
        <div class="card">
                <div class="top">
                    <div class="year">{{m.Year}}</div>
                    <div class="wish_icon"><a href="#" class="add_to_wishlist">wishicon</a></div>
                </div>

                <div class="middle">
                    <div class="img-container"><img src="{{ m.Image.url }}"></div>
                </div>

                <div class="bottom">
                    <div class="charge">{{m.charge}}</div>
                    <div class="list">{{m.list}}</div>
                </div>
        </div>
    {% endfor %}

</section>

CSS

.cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
}

.card {
  width: 250px;
  height: 350;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color: white;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

what it looks like: [1]: https://i.stack.imgur.com/KWiLm.png

what it should look like: [2]: https://i.stack.imgur.com/t2WuA.png

I want the cards to appear from left to right having equal distance from each other and also from both the left and right margins, so Ik that I can solve this with justify-content: flex-start; but that leaves me with unwanted space on the right side and I'm kinda lost, any help is appreciated, Thnx!

Answer 1

.cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.card {
  width: 250px;
  height: 350;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

<section class="cards">
  <div class="card">
    <div class="top">
      <div class="year">{{m.Year}}</div>
      <div class="wish_icon">
        <a href="#" class="add_to_wishlist">wishicon</a>
      </div>
    </div>

    <div class="middle">
      <div class="img-container"><img src="{{ m.Image.url }}" /></div>
    </div>

    <div class="bottom">
      <div class="charge">{{m.charge}}</div>
      <div class="list">{{m.list}}</div>
    </div>
  </div>
</section>

I think it'll help you out.

Answer 2

have you tried

Justify-content: space-evenly;