title: Slide show while using html/css does not work properly
body: <p>i made a slideshow using html and css, but whenever my slideshow auto moves, the scroll stretch instead of moving. you can see my code  here :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
  }
  
  .container,
  .section__bg {
    margin-right: auto;
    margin-left: auto;
  }
  
  .section__bg {
    padding-bottom: 10px;
    background-color: #333333;
  }
  
  #header h1,
  #header h3 {
    font-size: 33.92px;
    font-family: Myriad Pro;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 100;
  }
  
  #header .header__imgone {
    width: 43px;
    height: 42px;
  }
  
  #header .header__in {
    width: 100%;
  }
  
  #header .header__container,
  #header .header__in {
    background-color: #333333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #header .header__container div,
  #header .header__in div {
    margin-left: 6px;
    margin-right: 6px;
    border-bottom: 1px solid #797977;
  }
  
  #header .header__container img,
  #header .header__in img {
    margin-left: 15px;
    margin-right: 15px;
  }
  
  #section {
    color: #fff;
  }
  
  #section h2 {
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 18.67px;
    font-weight: bold;
    margin: 0px;
    height: 40px;
  }
  
  #section span {
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 10.67px;
  }
  
  #section .section__container {
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    background-color: #333333;
    transition: 1s ease;
  }
  
  #section .slideshow {
    background-color: #333333;
    float: left;
    min-width: 391px;
    max-width: 391px;
    border-right: 1px solid #797977;
    margin-top: 17px;
    margin-bottom: 17px;
  }
  
  #section .slideshow__block {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  #section .slideshow__block span {
    color: #b1c4d0;
  }
  
  #section .slideshow__info {
    padding-right: 16px;
  }
  
  #section .slideshow__bottomblock {
    display: flex;
    height: 70px;
    min-height: 70px;
  }
  
  #section .slideshow__bottomblock p {
    margin-bottom: 0px;
    font-size: 12px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    color: #b1c4d0;
  }
  
  #section .slideshow__about {
    flex-direction: column;
  }
  
  #section .slideshow__about div {
    margin-top: 10px;
  }
  
  #section .slideshow__about a {
    border: 1px solid #868684;
    color: #c8c8c8;
    font-size: 10.67px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    background-color: #868684;
    padding-left: 7px;
    padding-right: 26px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 5%;
    text-decoration: none;
  }
  
  #section .slideshow__rating {
    display: flex;
    align-items: baseline;
    margin-left: 13px;
    border-right: 1px dotted #797977;
    margin-top: 15px;
    padding-right: 10px;
    margin-right: 10px;
  }
  
  #section .slideshow__rating span {
    font-family: Myriad Pro;
    font-size: 24px;
  }
  
  #section .slideshow__inner {
    display: flex;
    align-items: center;
  }
  
  #section .slideshow__image img {
    border: 1px solid #bbbbbb;
    margin: 0px 13px 0px 13px;
  }
  
  #section .slideshow__dots {
    display: none;
    justify-content: center;
  }
  
  #section .slideshow__dots .slideshow__dot {
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    float: left;
    margin: 5px;
  }
  
  ::-webkit-scrollbar {
    width: 16px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #8a8484;
    background-clip: padding-box;
    border: 0.10em solid #bebeba;
    border-radius: 15px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #bebeba;
  }
  
  /* Buttons */
  ::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    border-style: solid;
  }
  
  ::-webkit-scrollbar-track-piece {
    background-color: #bbbbbb;
  }
  
  ::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-color: #bbbbbb;
    background: url("img/little_arrow.png");
    background-color: #868684;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  ::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-color: #bbbbbb;
    background: url("img/little_arrow_right.png");
    background-color: #868684;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .slideshow__inner:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
  }
  
  .slide {
    position: relative;
    -webkit-animation: slide 18s ease-in-out infinite;
    -moz-animation: slide 18s ease-in-out infinite;
    -ms-animation: slide 18s ease-in-out infinite;
    -o-animation: slide 18s ease-in-out infinite;
    animation: slide 18s ease-in-out infinite;
  }
  
  @-webkit-keyframes slide {
    0% {
      left: 0;
    }
    25% {
      left: -782px;
    }
    50% {
      left: -1564px;
    }
    75% {
      left: -2346px;
    }
    100% {
      left: -3128px;
    }
  }
  
  @media only screen and (min-width: 320px) and (max-width: 360px) {
    ::-webkit-scrollbar {
      display: none;
    }
    .slideshow__dots {
      display: flex !important;
    }
  }
  
  @media only screen and (max-width: 550px) {
    .header__in h1 {
      font-size: 15px !important;
    }
    .header__in h3 {
      font-size: 15px !important;
    }
    .header__in .header__imgtwo {
      width: 50px !important;
      height: 30.5px !important;
    }
    .header__in .header__imgone {
      width: 20px !important;
      height: 20px !important;
    }
    .header__in img {
      margin-left: 7px !important;
      margin-right: 7px !important;
    }
  }
  
  @media (min-width: 782px) {
    .container,
    .section__bg {
      width: 782px;
      min-width: 320px;
    }
  }
  
  .clearfix:after,
  .container:before,
  .container:after {
    display: table;
    content: " ";
  }
  
  .clearfix:after,
  .container:after {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Tomas Matulionis&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="header" id="header"&gt;
        &lt;div class="container header__container"&gt;
          &lt;div class="header__in"&gt;
            &lt;img class="header__imgtwo" src="img/IMDb_icon_.png" alt="IMDb_icon_"&gt;
            &lt;h1&gt;Recommends&lt;/h1&gt;
            &lt;img class="header__imgone" src="img/Movies-icon.png" alt="Movies-icon"&gt;
            &lt;h3&gt;MOVIES&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="section" id="section"&gt;
        &lt;div class="section__bg"&gt;
          &lt;div class="container section__container"&gt;
          &lt;div class="slideshow__inner slide"&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/uzduotis_01_792x300.jpg" alt="uzduotis_01_792x300"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;A Bug's Life&lt;/h2&gt;
                  &lt;span&gt;Animation, Adventure, Comedy&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/man.jpg" alt="man"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;All Quiet on &lt;br&gt; the Western Front&lt;/h2&gt;
                  &lt;span&gt;Drama, War&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A young soldier faces profound disillusionment in the soul-destroying horror of World War I.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/uzduotis_01_792x300.jpg" alt="uzduotis_01_792x300"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;A Bug's Life&lt;/h2&gt;
                  &lt;span&gt;Animation, Adventure, Comedy&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/man.jpg" alt="man"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;All Quiet on &lt;br&gt; the Western Front&lt;/h2&gt;
                  &lt;span&gt;Drama, War&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A young soldier faces profound disillusionment in the soul-destroying horror of World War I.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/uzduotis_01_792x300.jpg" alt="uzduotis_01_792x300"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;A Bug's Life&lt;/h2&gt;
                  &lt;span&gt;Animation, Adventure, Comedy&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/man.jpg" alt="man"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;All Quiet on &lt;br&gt; the Western Front&lt;/h2&gt;
                  &lt;span&gt;Drama, War&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A young soldier faces profound disillusionment in the soul-destroying horror of World War I.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/uzduotis_01_792x300.jpg" alt="uzduotis_01_792x300"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;A Bug's Life&lt;/h2&gt;
                  &lt;span&gt;Animation, Adventure, Comedy&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/man.jpg" alt="man"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;All Quiet on &lt;br&gt; the Western Front&lt;/h2&gt;
                  &lt;span&gt;Drama, War&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A young soldier faces profound disillusionment in the soul-destroying horror of World War I.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/uzduotis_01_792x300.jpg" alt="uzduotis_01_792x300"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;A Bug's Life&lt;/h2&gt;
                  &lt;span&gt;Animation, Adventure, Comedy&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slideshow"&gt;
              &lt;div class="slideshow__block"&gt;
                &lt;div class="slideshow__image"&gt;
                  &lt;img src="img/man.jpg" alt="man"&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__about"&gt;
                  &lt;h2&gt;All Quiet on &lt;br&gt; the Western Front&lt;/h2&gt;
                  &lt;span&gt;Drama, War&lt;/span&gt;
                  &lt;div&gt;&lt;a href="#"&gt;&lt;img src="img/button_ar.png" alt="arrow"&gt; more&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="slideshow__bottomblock"&gt;
                &lt;div class="slideshow__rating"&gt;
                  &lt;img src="img/Layer-11.png" alt="Layer-11"&gt;
                  &lt;span&gt;8.1&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="slideshow__info"&gt;
                  &lt;p&gt;A young soldier faces profound disillusionment in the soul-destroying horror of World War I.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slideshow__dots clearfix"&gt;
            &lt;div class="slideshow__dot"&gt;&lt;/div&gt;
            &lt;div class="slideshow__dot"&gt;&lt;/div&gt;
            &lt;div class="slideshow__dot"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="javascript.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle available <a href="https://jsfiddle.net/8sgL14c9/" rel="nofollow noreferrer">here</a>.    </p>
  
  <p>the scroll bar should move with the slideshow.</p>