Avoiding overlap of elements inside a col? - html

Question

I'm currently messing a bit around with the bootstrap grid system, I kinda get to understand it, but if I change the width of the elements inside a col, then it's overlapping when I resize the browser.
Just trying to make cards responsive when resizing the browser, but I want to change the size of the cards aswell without making them overlap.
This is how it looks like when I change the width
This is how it's supposed to look like
that's how I do it right now:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-down"></i></a>
</div>
<h4 class="text-white mb-2">1</h4>
<p class="text-white">Test Card</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-up"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 2</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-ticket"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 3</p>
</div>
</div>
</div>
</div>
</div>
</main>
Kinda stuck on that.
Thanks for any help.

Answer 1

Give col-xl-4 class:
width of (94/3)%
padding left of 1%
padding right of 1%
Give container-fluid class:
padding left of 20px
padding right of 20px