HTML CSS cards overlapping - html

Question

the problem is that my css cards are overlapping, I need the three cards to have space from one another, whilst sitting side by side each other horziontally. I am using bootstrap also and saw a solution online to use float-left float-right to put images side by side, but this has had no effect on my html page when I've refreshed it so far.
.container {
width: 4000px;
margin: auto;
}
.card-white {
background: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 50px;
width: 400px;
text-align: center;
padding: 24px;
margin: 20px;
}
.card-white img {
width: 360px;
height: 360px;
object-fit: cover;
border-radius: 4px;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-left">
<h3>Film Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-center">
<h3>Monologue Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-right">
<h3>Voice reel</h3>
</div>
</div>
</div>
</div>

Answer 1

The error is in your css code.
If you run this without your css it' works perfect.
First of all you don't need to customize the container size in bootstrap like this:
.container {
width: 4000px;
margin: auto;
}
Second, a fixed size can't be responsive like this:
.card-white {
width: 400px;
}
.card-white img {
width: 360px;
}
So try it without fixed-size.
You can manage this without css, only with bootstrap classes in your divs.
<div class="col-xs-12 col-sm-6 col-md-3">
check this, for bootstrap 4:
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Spacing, Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
check this, for bootstrap 5:
Float bootstrap 5
Spacing bootstrap 5

Answer 2

Using flexbox might be a better approach:
https://coder-coder.com/display-divs-side-by-side/
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
You can refer to: https://getbootstrap.com/docs/4.0/utilities/flex/ for bootstrap.