Sliding Cards Spacing Issue - html

Question

I have made some cards and restricted them from wrapping, thus making
a card-wrapper which becomes container for Horizontal Scrollable
Cards.
I am Facing small issue. The Last Card does not get any spacing at
the end..
See below screenshot
html,
body {
width: 100%;
height: 100%;
}
body {
background-color:#f4f4f4;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.card {
display: flex;
background-color: #fff;
min-width: 100%;
min-height: 200px;
margin: 1rem;
overflow-x: auto;
}
.card--content {
background-color: #DED3EE;
min-width: 200px;
margin: 5px;
}
<section class="card">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</section>
Codepen Link : Click
Any help?

Answer 1

I think you are looking for this solution. You should calculate .card-track width dynamicaly
This method use when creating image slider
html,
body {
width: 100%;
background-color:#f4f4f4;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: red;
width: 80%;
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
overflow-x: scroll;
}
.card-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
width: calc(200px*10 + 10px*10); /*Card content width x no of iems + margins */
}
.card--content {
background-color: #DED3EE;
width: 200px;
height: 120px;
margin: 5px;
float: left;
}
<section class="card">
<div class="card-track">
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
<div class="card--content"></div>
</div>
</section>

Answer 2

All you need to do is switch your card spacing from margin to padding and add an inner container to each card.
Overflowing margin doesn't push the items within the parent container, rather it pushes the siblings outside. Since you have overflow hidden (by auto/scroll), it is effectively rendered margin-right: 0;
A relatively easy fix is to use padding instead. But you'll have to create an inner container so that you can use padding on the contents and so that the background-color is contained within the spacing.
You can see a working example here: https://codepen.io/rjhewitt3/pen/MqYjeg