As a beginner, I welcome even the simplest advice.
When I reduce the display size, one card moves below and there is no spacing between the two cards.
<div class="row">
<div class=" col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..." alt="...">
<div class="card-body">
<p class="card-text">Some text goes here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">More text goes here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Even more text goes here</p>
</div>
</div>
</div>
</div>
The HTML is straightforward. The CSS code
.illustration-img{
padding: 0 5px 0;
}