Your HTML is an absolute mess:
Edit fiddle - JSFiddle - Code Playground[
^]
You have
cards-container
elements within other
cards-container
elements; and you have
cards-container
elements containing single
card-container
elements.
You haven't explained what layout you want. But you can start by tidying up your HTML to have a single
cards-container
containing all of your
card-container
elements:
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
...
</div>
</div>
</div>
Edit fiddle - JSFiddle - Code Playground[
^]
Then look to move the inline styles (
width:120px;height:120px;
) to your stylesheet:
.card-container > .card {
width: 120px;
height: 120px;
}
Edit fiddle - JSFiddle - Code Playground[
^]
Once you've done that, you can start trying to make it look like what you want. If you're still struggling, you'll need to explain precisely what you want it to look like.