Carrosel desalinhado

Front-end CSS
, ,
#1

Eu tenho um carrosel de imagens em html e css e quero centralizar o 3° elemento com translateX porém eu não consigo segue o código abaixo:

Obs: A aplicação é para dispositivos de 710px para baixo e eu quero centralizar de 710 para baixo.

    #slide_section{
        width: 100%;
        height: auto;
        padding-bottom: 40px;
    }

    #slide{
        width: 76.06295754026354vw;
        height: auto;
        margin: auto;
    }

    #imgSlide{
        width: 100%;
        height: 300px;
        margin: unset;
        display: flex;
        
        /*Modifica está linha*/
        transform: translateX(calc(-15% - -5vw));
    }

    .slide{
        width: 76.06295754026354vw;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img {
        width: 120px;
        height: 210px;
    }

    .slide{
        width: 158px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img{
        width: 158px;
        height: 276px;
    }

<section id="slide_section">       
      <div id="slide">
          <div id="imgSlide">
              <div class="slide" id="img1">
                  img...
              </div>
              <div class="slide" id="img2">
                  img...
              </div>

              <div class="slide" id="img3">
                  img...        
              </div>

              <div class="slide" id="img4">
                  img...
              </div>

              <div class="slide" id="img5">
                  img..
              </div>

              <div class="slide" id="img6">
                  img...
              </div>
          </div>
      </div>
</section>

Porfavor respondam!

#2

Não duplique tópicos.

#4

Desculpe, é que ninguem havia respondido o anterior. :confused:

#5

Duplicata: Carrosel desalinhado