Horizontal Scroll Element to be made responsive, React, Bootstrap, JS

I made a horizontal scrolling element as displayed from the example given here:
https://css-tricks.com/pure-css-horizontal-scrolling/

Basically, I have a static nav bar and static footer, and through bootstrap the width of these elements change as the viewport changes in size (container-fluid). Because my horizontal-scroll-wrapper-inner element is being rotated twice (to give it that horizontal scroll effect), i’m having to use translateY() to adjust it into the right place. The issue i’m having is that when the viewport sizes change, the position of the horizontal-scroll-wrapper-inner is never in the right place.

What I’ve tried:

1. Absolute positioning the horizontal-scroll-wrapper-inner element to stick to the left side of the page (this doesn’t work because after you rotate the element, the positioning never sticks to it’s parent element, i.e. horizontal-scroll-wrapper). Also, even when it does, I have to adjust the width and height of the element and changing one affects the other. (Ex. changing height dynamically changes the width so it sticks out of its parent wrapper and leaks into the nav/footers -> if someone can explain to me why changing the height affects the width and vice versa i’d appreciate that answer as well)
2. Creating a BUNCH of media queries at certain breakpoints but its never completely fixed because when you change the size of the browser on your laptop/desktop, it looks out of place in between breakpoints.

Heres the code:

// HTML
<div class="p-0" id="grid">
      <section id="navsection" class="container-fluid"><Nav /></section>
      <div class="horizontal-scroll-wrapper ">
        <div class="horizontal-scroll-wrapper-inner">
          <div id="mainsection"><Main /></div>
          <div id="projectsection"><Projects /></div>
        </div>
      </div>
      <section id="footersection" class="container-fluid"><Footer /></section>
    </div>


// CSS
.horizontal-scroll-wrapper {
  height: 80vh;
  width: 100vw;
}

.horizontal-scroll-wrapper-inner {
  transform: rotate(-90deg) translateY(-522px);
  transform-origin: right top;
  height: 100vw;
  width: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


.horizontal-scroll-wrapper-inner > div {
  width: 100px;
  height: 100px;
  margin: 2px;
  transform: rotate(90deg) translateX(100px) ;
  transform-origin: right top;
}

To explain a bit further:
.horizontal-scroll-wrapper has a fixed height and width so that its placed in the middle, between the nav on top and footer on bottom.
.horizontal-scroll-wrapper-inner is the wrapper that contains several divs -> .horizontal-scroll-wrapper-inner > div

The divs are rotated 90deg then the wrapper-inner is rotated -90deg so that I can achieve a horizontal scroll whilst using a vertical scroll on my mouse. In order to get the wrapper-inner placed where I want it to, I’ve been playing with transform: translateY().

Please help me 🙂