Bootstrap Cards - issue with centering when viewed on mobile device

Bootstrap Cards - issue with centering when viewed on mobile device

I've extensively researched this to no avail. I am using the following code to output the screenshot below it, but when viewed on a mobile device, it shifts to the left.

I've extensively researched this to no avail. I am using the following code to output the screenshot below it, but when viewed on a mobile device, it shifts to the left.

Can anyone help me out with this? Thanks in advance!

<div class="container">
    <div class="row g-mb-20">
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" 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>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" 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>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" 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>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" 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>
      </div>
    </div>
  </div>

Desktop Version

Mobile Version

css bootstrap user-experience

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose

Vanilla CSS vs Bootstrap vs Tailwind CSS - Should you use vanilla CSS (no framework), a component framework like Bootstrap or a utility framework like Tailwind CSS? Here's a detail comparison between Bootstrap, Tailwind and "just CSS". All three approaches allow you to style your page but there are important differences you must consider when making the decision.

Tailwind CSS: Liệu có thay thế được Bootstrap?

Trong quá trình phát triển chúng ta đã quá quen với những bộ phát triển giao diện như là Bootstrap, Foundation, Bulma. Đây hầu như là những bộ giao diện gần như là hoàn chỉnh nhất rồi. Tailwind CSS là gì? Tailwind sinh ra để làm gì? Liệu Tailwind CSS có thay thế được Bootstrap?

Why You Should Learn Bootstrap 5 in 2020 | Best CSS Framework in 2020

We review Bootstrap 5 and why you should learn bootstrap 5 in 2020. Bootstrap has been the leading CSS Framework for over 5 years. Bootstrap allows you to build websites and web applications super quick so you don't have to spend so much time with writing css properties.

How To Create A Responsive User Profile Page Using #html #css #javascript

In this video we will take a look at how to create a responsive profile page for a website with see less, see more text, functional tabs, alert nofication, s...

How to Make Complete Responsive Website using Bootstrap/HTML/CSS

Learn how to make complete website using Bootstrap, HTML and CSS. We are creating this complete bootstrap responsive website step by step. We are going to create this website really from the beginning. We are using bootstrap to glorify the website and make it responsive.