Bootstrap cards overlapping-CodePudding

Im looking at aligning bootstrap cards and make them responsive. I have them centred but they are overlapping and not sure where I'm going wrong. its like its all sticking to the left. This is for email development where the width has a max of 680px.

Any help will be much appreciated!

/** {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
*/
  .email-background{
    background-color: lightgrey;
    font-family: sans-serif;
    padding: 20px 5px 50px 5px;
    width: 100%;
  }

  .email-container{
    background-color: #ffff;
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-radius: 15px;
    padding-top: 25px;
  }
/*
  .features .smaller-text{
    font-size: smaller;
    display: inline-block;
  }
*/
  .price{
    color: turquoise;
  }
/*
  .icon-case{
    height: 1em;
    width: 1em;
    float: left;
  }
*/
  .view-btn{
    background-color: #0fbd9a;
    color: #fff;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 15px;
    float: right;
  }
 

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.email-column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.email-row {
  margin: 0 -5px;
  padding-top: 25px;

}

/* Clear floats after the columns */
.email-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 680px) {
  .email-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 26px;
  text-align: left;
  background-color: #f1f1f1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>SkyScanner Test</title>
</head>
<body>
    <div >
        <div >
            <p ><strong>Check out these sweet rides</strong></p>
            <div >
                <div >
                    <div  style="width: 18rem;">
                        <img src="/assets/economy.png"  alt="Car Pic">
                        <div >
                          <h5 >Car 1</h5>
                          <h6>2-3 Doors</h6>
                          <div >
                            <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                            <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
                            </div>
                            <div >
                                <h6 ><small>from</small></h6>
                                <h6><strong >£33</strong><small> per day</small></h6>
                            </div>
                          <a  href="#">View <img src="/assets/arrow.png"></a>
                        </div>
                      </div>
                </div>
                <div >
                    <div  style="width: 18rem;">
                        <img src="/assets/economy.png"  alt="Car Pic">
                        <div >
                          <h5 >Car 2</h5>
                          <h6>2-3 Doors</h6>
                          <div >
                            <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                            <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
                            </div>
                            <div >
                                <h6 ><small>from</small></h6>
                                <h6><strong >£33</strong><small> per day</small></h6>
                            </div>
                          <a  href="#">View <img src="/assets/arrow.png"></a>
                        </div>
                      </div>
                </div>
            </div>
            <div >
                <div >
                    <div  style="width: 18rem;">
                        <img src="/assets/economy.png"  alt="Car Pic">
                        <div >
                          <h5 >Car 3</h5>
                          <h6>2-3 Doors</h6>
                            <div >
                            <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                            <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
                            </div>
                            <div >
                                <h6 ><small>from</small></h6>
                                <h6><strong >£33</strong><small> per day</small></h6>
                            </div>
                          <a  href="#">View<img src="/assets/arrow.png"></a>
                        </div>
                      </div>
                </div>
                <div >
                    <div  style="width: 18rem;">
                        <img src="/assets/economy.png"  alt="Car Pic">
                        <div >
                          <h5 >Car 4</h5>
                          <h6>2-3 Doors</h6>
                          <div >
                          <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                          <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
                          </div>
                          <div >
                          <h6 ><small>from</small></h6>
                          <h6><strong >£33</strong><small> per day</small></h6>
                          </div>
                          <a  href="#">View<img src="/assets/arrow.png"></a>
                        </div>
                      </div>
                </div>

            </div>


        </div>

    </div>
</body>
</html>

CodePudding user response：

You have a fixed column width of 25% but then you're telling the cards to be 18rem (inline). Remove the column width and just set the cards to the size you want in your actual card class rather than inline.

I didn't want to re-write your entire project, but I'd suggest looking into Bootstraps flex containers over using floats (hence the sticking to the left) so you can get everything to line up better and have more control and not have to worry about elements shifting when the screen size changes

https://getbootstrap.com/docs/5.0/utilities/flex/

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.email-background {
  background-color: lightgrey;
  font-family: sans-serif;
  padding: 20px 5px 50px 5px;
  width: 100%;
}

.email-container {
  background-color: #ffff;
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-radius: 15px;
  padding-top: 25px;
}


/*
  .features .smaller-text{
    font-size: smaller;
    display: inline-block;
  }
*/

.price {
  color: turquoise;
}


/*
  .icon-case{
    height: 1em;
    width: 1em;
    float: left;
  }
*/

.view-btn {
  background-color: #0fbd9a;
  color: #fff;
  padding: 15px 20px;
  text-decoration: none;
  border-radius: 15px;
  float: right;
}


/* Float four columns side by side */

.email-column {
  float: left;
  padding: 0 10px;
}


/* Remove extra left and right margins, due to padding */

.email-row {
  margin: 0 -5px;
  padding-top: 25px;
}


/* Clear floats after the columns */

.email-row::after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive columns */

@media screen and (max-width: 680px) {
  .email-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}


/* Style the counter cards */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 26px;
  text-align: left;
  background-color: #f1f1f1;
  width: 18rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <title>SkyScanner Test</title>
</head>

<body>
  <div >
    <div >
      <p ><strong>Check out these sweet rides</strong></p>
      <div >
        <div >
          <div >
            <img src="/assets/economy.png"  alt="Car Pic">
            <div >
              <h5 >Car 1</h5>
              <h6>2-3 Doors</h6>
              <div >
                <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
              </div>
              <div >
                <h6 ><small>from</small></h6>
                <h6><strong >£33</strong><small> per day</small></h6>
              </div>
              <a  href="#">View <img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img src="/assets/economy.png"  alt="Car Pic">
            <div >
              <h5 >Car 2</h5>
              <h6>2-3 Doors</h6>
              <div >
                <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
              </div>
              <div >
                <h6 ><small>from</small></h6>
                <h6><strong >£33</strong><small> per day</small></h6>
              </div>
              <a  href="#">View <img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img src="/assets/economy.png"  alt="Car Pic">
            <div >
              <h5 >Car 3</h5>
              <h6>2-3 Doors</h6>
              <div >
                <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
              </div>
              <div >
                <h6 ><small>from</small></h6>
                <h6><strong >£33</strong><small> per day</small></h6>
              </div>
              <a  href="#">View<img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img src="/assets/economy.png"  alt="Car Pic">
            <div >
              <h5 >Car 4</h5>
              <h6>2-3 Doors</h6>
              <div >
                <h6 ><small><img  src="/assets/original.png">4 Seats</small></h6>
                <h6 ><small><img  src="/assets/suitcase.png">2</small></h6>
              </div>
              <div >
                <h6 ><small>from</small></h6>
                <h6><strong >£33</strong><small> per day</small></h6>
              </div>
              <a  href="#">View<img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
</body>

</html>