I have a problem aligning the border between div 4 and 5-CodePudding

I have a problem aligning the border between div 4 and 5. My problem is that the amount of divs can variate and if the count is such that at the bottom i have 2 divs, i need to align a border between.. Any ideas or suggestions?

.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.card {
  border-radius: 0%;
  border: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  float: none;
  width: auto;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

@media screen and (min-width: 1200px) {
  .card:nth-child(3n) {
    border-left: 1px solid black
  }
  .card:nth-child(3n -1) {
    border-left: 1px solid black
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .card:nth-child(2n) {
    border-left: 1px solid black
  }
}

.card_components {
  background-color: red;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 329px;
}

<div class="container">
  <div class="row">
    <div class="card">
      <div class="card_components">1</div>
    </div>
    <div class="card">
      <div class="card_components">2</div>
    </div>
    <div class="card">
      <div class="card_components">3</div>
    </div>
    <div class="card">
      <div class="card_components">4</div>
    </div>
    <div class="card">
      <div class="card_components">5</div>
    </div>
  </div>
</div>

CodePudding user response：

did you mean it?

.container{
    max-width: 1140px;
    margin-left:auto;
    margin-right:auto;
}



.row{
  
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;

  
}

.card{
    border-radius: 0%;
    border: 0px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
    text-align: center;
}

    @media screen and (min-width: 1200px) {
    .card:nth-child(3n)  {
      border-left: 1px solid black
    }
    
    .card:nth-child(3n -1)  {
      border-left: 1px solid black
    }
  }


  @media screen and (min-width: 992px) and (max-width: 1200px) {

    .card:nth-child(2n )  {
      border-left: 1px solid black
    }

  }
.card_components {
    background-color:red;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 329px;
}

 <div class="container">
  <div class="row">
    
    
    <div class="card"><div class="card_components">1</div></div>
    <div class="card"><div class="card_components">2</div></div>
    <div class="card"><div class="card_components">3</div></div>
    <div class="card"><div class="card_components">4</div></div>
    <div class="card"><div class="card_components">5</div></div>
  </div>
   </div>

CodePudding user response：

enter code here

https://codepen.io/sunny-parsana/pen/abwGzYx (center align div 4 and div 5 border issue slove it)