So I've been losing my head trying to figure this out. I can't seem to make the cards horizontally centered inside this section and when I checked inspect elements, it turns out the cards are occupying some extra space which isn't really padding or margin. Badly need help on this one. I simply used bootstrap grid and the goal is to get the cards equally centered horizontally.
#products
{
@include sectionDefaultValues();
#products-txt-cont
{
background-color: $siteColor;
padding: 15px;
}
#products-txt
{
color: white;
}
}<section id="products"><div id="products-txt-cont"><h2 id="products-txt">PRODUCTS AND SERVICES</h2></div><div class="container3"><div class="row"><div class="col col-4"><div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalone"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div><div class="modal" tabindex="-1" role="dialog" id="modalone"><div class="modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div></div></div><div class="col col-4"><div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modaltwo"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div><div class="modal" tabindex="-1" role="dialog" id="modaltwo"><div class="modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div></div></div><div class="col col-4"><div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalthree"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div><div class="modal" tabindex="-1" role="dialog" id="modalthree"><div class="modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div></div></div></div></div></section><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>