Как сделать чтобы блоки были на всю ширину страницы?

Question

Алексей @Eldenhard

HTML
CSS

Как сделать чтобы блоки были на всю ширину страницы?

<div class="container">
  <div class="img-card">
    <img src="/static/rock1.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock2.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock3.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock4.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock5.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
  <div class="img-card">
    <img src="/static/rock6.jpg" alt="">
    <div class="content">
      <h2>С заботой</h2> 
      <p>о ваших клиентах</p>
    </div>
  </div>
</div>

.container{
    
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .img-card{

      width: 100%;
      max-width: 320px;
      height: 250px;
      margin: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

  .img-card:nth-child(1){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(2){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card:nth-child(3){
    box-shadow: 0 10px 20px rgba(239,79,79, 0.2);
  }
  .img-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all 1s;
  }
  .img-card:nth-child(1)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(2)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(3)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(4)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(5)::before{background-color: rgba(223, 223, 223, 0.9);}
  .img-card:nth-child(6)::before{background-color: rgba(223, 223, 223, 0.9);}


  .img-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-100%);
  transition: all 1s;
}
.img-card:nth-child(1) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);
  }
  .img-card:nth-child(2) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(3) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(4) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(5) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
  .img-card:nth-child(6) .content{
    box-shadow: 0 10px 20px rgba(5, 1, 59, 0.2);;
  }
.content h2,.content p{
  opacity: 0;
  transition: all 0.3s;
  color: #FAFAFA;
}
.content h2{
  letter-spacing: 1px;
}
.content p{
  font-size: 12px;
}

.img-card:hover::before{transform: translateY(95%);}

.img-card:hover .content {transform: none;}

.img-card:hover h2{
  opacity: 1;
  transition-delay: 0.3s;
} 

.img-card:hover p{
  opacity: 1;
  transition-delay: 0.3s;
}