HTML CSS cards overlapping

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;
}









  
    
      
        
        Film Showreel
      
    
    
      
        
        Monologue Showreel
      
    
    
      
        
        Voice reel

user_15125291 · Answer

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.

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

user_1561973 · Answer

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.

HTML CSS cards overlapping

2 Answers