Amazing CSS Scroll Snapping slider flex direction row

<!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">
    <title>Amazing CSS Scroll Snapping slider flex direction row</title>
  <style>
    body {
      margin: 0;
    }

    .container {
      scroll-snap-points-x: repeat(800px);
      scroll-snap-type: x mandatory;
      overflow-x: scroll;
      width: 800px;
      height: 450px;
      border: 5px solid red;
      position: absolute;
    }

    .web1 {
      position: absolute;
      display: flex;
      width: 100%;
      height: 100%;
    }

    .image {
      scroll-snap-align: start;
      padding: 0 1px;
      width: 100%;
      height: auto;
    }

.clone{
position:absolute;
top:0;
right:0;
}

.clone img{
width:200px;
}


  </style>
</head>

<body>

  <section class='container'>
    <div id='web1' class='web1'>
      <img class='image' src='https://1xpto.netlify.app/pics/1.jpg' />
      <img class='image' src='https://1xpto.netlify.app/pics/3.jpg' />
      <img class='image' src='https://1xpto.netlify.app/pics/4.jpg' />
      <img class='image' src='https://1xpto.netlify.app/pics/7.jpg' />
      <img class='image' src='https://1xpto.netlify.app/pics/car.jpeg' />
      <img class='image' src='https://1xpto.netlify.app/pics/pic1.jpg' />
      <img class='image' src='https://1xpto.netlify.app/pics/pic2.png' />
      <img class='image' src='https://1xpto.netlify.app/pics/pic3.png' />
    </div>
  </section>

    <a class='clone' href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw'><img src='https://1xpto.netlify.app/pics/clone.png'/></a>


</body>

</html>