This code was copied from a webpage 
by Jesse Wei 
titled: 'CSS Horizontal Scroll: a Step-by-Step Guide' 
found at https://dev.to/jessewei/css-horizontal-scroll-a-step-by-step-guide-418d


<div class="container">
  <div>
    <img src="https://oneeyemoon.neocities.org/lemon pi grey.png" alt="Image of a sculpture: a woonden box, silver chalice, spiralised lemon, mechanism, magnetic tape and jar." />
    <p></p>
  </div>
  <div>
    <img src="./images/image2.jpeg" alt="" />
    <p>image 2</p>
  </div>
  <div>
    <img src="./images/image3.jpeg" alt="" />
    <p>image 3</p>
  </div>
  <div>
    <img src="./images/image4.jpeg" alt="" />
    <p>image 4</p>
  </div>
  <div>
    <img src="./images/image5.jpeg" alt="" />
    <p>image 5</p>
  </div>
  <div>
    <img src="./images/image6.jpeg" alt="" />
    <p>image 6</p>
  </div>
  <div>
    <img src="./images/image7.jpeg" alt="" />
    <p>image 7</p>
  </div>
  <div>
    <img src="./images/image8.jpeg" alt="" />
    <p>image 8</p>
  </div>
</div>

<style>
.container {
  /* 
  Width and height will swap after rotation. 
  To make the container as wide as the screen after rotation,
  we need to set its initial height to 100vw.
  */
  width: 500px;
  height: 100vw;
}
.container div {
  width: 100%;
  height: 500px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  ...
  /*
  translateY(-500px) makes the container align
  to the left of the screen.
  */
  transform: rotate(-90deg) translateY(-500px);
  transform-origin: top right;
}
.container div {
  ...
  transform: rotate(90deg);
}

.container {
  ...
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
}
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  width: 500px;
  height: 100vw;
  transform: rotate(-90deg) translateY(-500px);
  transform-origin: top right;
  overflow-x: hidden;
  overflow-y: auto;
}
.container div {
  position: relative;
  width: 100%;
  height: 500px;
  transform: rotate(90deg);
  margin: 10px 0;
}
.container div:first-child {
  margin: 0;
}
p {
  padding: 10px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}