Here is the HTML structure for the cards:
<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>
This arrangement results in: https://i.sstatic.net/3zoam.png
Currently, both the card and the card body have a background color of white with an opacity of 0.4 set by a CSS sheet. The issue lies in the width discrepancy between the card, image, and card body. Removing row-related classes would make them the same size but vertically stacked, which isn't desired. Using a card deck doesn't work for fixed width and horizontal scrollability. How can the width of the card match that of the image and the body?