I'm having an issue with applying a simple shadow to a cards component. The shadow appears mirrored and out of place.
My suspicion is that it might be related to the margin-bottom property, but I'm unable to pinpoint the exact reason behind this glitch.
Could someone please advise on the correct method to add shadows to cards?
https://jsfiddle.net/qdjeuo65/
<style>
.card {
box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
}
</style>
<div class="card-columns">
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">title</div>
<div class="card-text">
body
</div>
</div>
<div class="card-footer">
footer
</div>
</div>
</div>
I am using Chrome version 84.