I've been working on creating a responsive card for different screen sizes, but I've encountered a problem. On mobile screens, there seems to be some unwanted blank space on the right side of the card. Is there a way to center this card on smaller screens using Bootstrap 4? Below is an example of my code:
<div class="container">
<div class="mt-5">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mr-lg-5 mt-4">
<div class="card text-center" style="width: 18rem;">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="https://source.unsplash.com/random/800x600" />
</div>
<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>
</div>
<div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mr-lg-5 mt-4">
<div class="card text-center" style="width: 18rem;">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="https://source.unsplash.com/random/800x600" />
</div>
<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>
</div>
</div>
</div>
</div>
To illustrate the issue, here is a picture of the blank space on the right side: https://i.sstatic.net/D3o64.png