I need to adjust the spacing between columns without disrupting the grid system layout. Adding margin to the cards results in only 3 cards per row instead of 4.
Below is the code snippet that I'm struggling with. The challenge lies in controlling the gaps between the cards while keeping each row at four cards.
<div class ="container">
<div class ="row">
<div class ="d-flex flex-wrap">
<div class ="card p-0 col-12 col-lg-3">
<img src = "#">
[Add your title here]<p> .... </p>
</div>
<div class ="card p-0 col-12 col-lg-3">
<img src = "#">
<p> .... </p>
</div>
<div class ="card p-0 col-12 col-lg-3">
<img src = "#">
<p> .... </p>
</div>
<div class ="card p-0 col-12 col-lg-3">
<img src = "#">
<p> .... </p>
</div>
</div>
</div>
</div>
<style>
.card img{
width:100%;
}
..card p{
width:100%;
color : green;
font-size :18px;
float:right
}
</style>