White column to the right beyond 100% of the page

Question

I'm trying with Bootstrap to get responsive cards. This white column appeared off the page that puts the scroll to the right and irritates me terribly. Can anyone help me?

If you have any advice on how I could have done it more easily, again with Bootstrap, please let me know. I have tried removing the padding to the div col that overhangs, but besides having a terrible effect, it doesn't solve the problem, help me remove this damn white column.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<main class="row">
  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">

      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>

      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-6">
    <div class="card p-2 m-1" style="width: auto;">
      <img src="https://via.placeholder.com/300x100" class=".card-img-top rounded radius" alt="...">
      <div class="card-body">
        <h5 class="card-title">Silhouette</h5>
      </div>
      
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Group: Kana-Boon</li>
        <li class="list-group-item">Genre: J-Pop/Rock</li>
        <li class="list-group-item">Duration: 3:12</li>
      </ul>
      
      <div class="card-body">
        <a href="#" class="card-link">Card link</a>
      </div>
    </div>
  </div>
</main>

Answer 1

Per the grid docs, any row should reside in a container. The two have offsetting padding which makes them rather codependent. Omitting a container results in the overflow and scrollbar that has vexed you.

I've used the fluid container option since it seems that you want things full width on the page.

Other tips: You had .card as a class name. That's not valid. Then, don't use inline styles to override things (as in width: auto). Look for library solutions, otherwise use custom CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<main class="container-fluid"><!-- HERE ------------------>
  <div class="row">
    <div class="col-xl-3 col-md-4 col-6">
      <div class="card p-2 m-1">
        <img src="https://via.placeholder.com/300x100" class="card-img-top rounded radius" alt="...">

        <div class="card-body">
          <h5 class="card-title">Silhouette</h5>
        </div>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">Group: Kana-Boon</li>
          <li class="list-group-item">Genre: J-Pop/Rock</li>
          <li class="list-group-item">Duration: 3:12</li>
        </ul>

        <div class="card-body">
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-4 col-6">
      <div class="card p-2 m-1">
        <img src="https://via.placeholder.com/300x100" class="card-img-top rounded radius" alt="...">

        <div class="card-body">
          <h5 class="card-title">Silhouette</h5>
        </div>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">Group: Kana-Boon</li>
          <li class="list-group-item">Genre: J-Pop/Rock</li>
          <li class="list-group-item">Duration: 3:12</li>
        </ul>

        <div class="card-body">
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-4 col-6">
      <div class="card p-2 m-1">
        <img src="https://via.placeholder.com/300x100" class="card-img-top rounded radius" alt="...">

        <div class="card-body">
          <h5 class="card-title">Silhouette</h5>
        </div>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">Group: Kana-Boon</li>
          <li class="list-group-item">Genre: J-Pop/Rock</li>
          <li class="list-group-item">Duration: 3:12</li>
        </ul>

        <div class="card-body">
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-4 col-6">
      <div class="card p-2 m-1">
        <img src="https://via.placeholder.com/300x100" class="card-img-top rounded radius" alt="...">

        <div class="card-body">
          <h5 class="card-title">Silhouette</h5>
        </div>

        <ul class="list-group list-group-flush">
          <li class="list-group-item">Group: Kana-Boon</li>
          <li class="list-group-item">Genre: J-Pop/Rock</li>
          <li class="list-group-item">Duration: 3:12</li>
        </ul>

        <div class="card-body">
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
    </div>
  </div>
</main>