I'm having trouble organizing a row of 8 cards into a single line. I set a margin of 2 columns on the left side and each card size to 1, totaling 10. However, my row is all messed up. https://i.sstatic.net/TQOMR.png
Here is my current code for the border:
<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-lg-1 text-center">
<div class="card border-secondary mb-3" style="width: 10rem;">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
</img>
<div class="card-block">
<div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
</div>
</div>
</div>
</div>
I would like the card to maintain this width and potentially overflow on the right side of the screen. How can I achieve this?