After creating a unique non-bootstrap class called services, I added 3 bootstrap 4 cards inside with the same resolution of 225x225 px. To align them horizontally, I applied the style display: flex. However, they were not aligning as expected.
I attempted to use the same width and height attributes for each card, but this did not solve the alignment issue. I also tried using the img style rem attribute without success.
<div class = "services">
<div class="card">
<img src="img/html.png" class="card-img-top" alt="HTML">
</div>
<div class="card">
<img src="img/css.png" class="card-img-top" alt="CSS" >
</div>
<div class="card">
<img src="img/js.png" class="card-img-top" alt="JS" >
</div>
</div>
To achieve the desired result of perfectly aligned card images with the same width and height, further adjustments may be needed.