Bootstrap - cards in a row have a strange width - html

Question

The cards html looks like this:
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1</b>
</h1>
</div>
</div>
</div>
</div>
and it creates:
The background color for both the card and the card body is set in a css sheet to white with an opacity of 0.4. As you can see the width of the card is bigger than the width of the image and the card body. If i remove the row related classes from this, they are the same size however this will not work as they stack vertically. I cannot use a card deck because i want these to have a fixed width and be horizontally scrollable which doesn't seem to work with a card deck. How can I make the width of the card match the width of the image and body?

Answer 1

The cards should be placed inside columns.
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... "
Also...
"When building grid layouts, all content goes in columns. The
hierarchy of Bootstrap’s grid goes from container to row to column to
your content. "
You don't want to...
Use a col-* without a row as it's immediate parent.
Place content directly inside the row.

Answer 2

Regardless of how you use the grid classes (correctly or incorrectly), in your case the source of the space is padding BS applies to .card.
You can add .p-0 to the .card or otherwise set the padding to zero on the element. In the snippet below I have added .p-0 only to the first card for comparison:
div.container-fluid {
background-color: DarkSlateBlue;
}
div.card,
div.card-body {
background-color: rgba(255, 255, 255, 0.4);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card p-0" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2 .card.p-0</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1 .card</b>
</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>