Facing problems in aligning horizontal scrolling website

I have build a horizontal scrolling website. live link.

NOTE: “THE WEBSITE ISN’T RESPONSIVE YET”

how to replicate the issue:
(you might be able to see a thin white line at the bottom of the home screen as well)

1. open dev tools, there will be a white space on the top part of the website.
2. also by resizing width in dev tools, you can see the website behaves very strangely

basic idea of How i got till here:

1. rotated the outer wrapper div by 90deg anti-clockwise.
2. rotated to inner-wrapper div by 90deg clockwise.

here is the code of this part of the website which contains all of the horizontal scroll logic. But if you need the complete website code i can add that as well. website is only using react no other library or framework

import React from "react";
import "./App.css"
import Intro from "./pages/Intro";
import LandingPage from "./pages/LandingPage";
import Skills from "./pages/Skills";

function App() {
  return (
    <div className="outer-wrapper">
      <div className="wrapper">

      <section className="first">
        <LandingPage />
      </section>
      <section className="second">
        <Skills />
      </section>
      <section className="third">
        <Intro />
      </section>
      <section className="fourth">
        <Intro />
      </section>
      </div>
    </div>
  );
}

export default App;

*{
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
::-webkit-scrollbar{
  display: none;
/* overflow:-moz-hidden-unscrollable */
}
.outer-wrapper{
  /* padding: 10%; */
  height: 100vw;
  background-color: black;
  transform: rotate(-90deg) translateX(-59rem);
  transform-origin: top left;
  width: 100vh;

  overflow-y: scroll;
  overflow-x: hidden;
  
}
.outer-wrapper::-webkit-scrollbar{
  /* display: none; */
  overflow: hidden;
}
.wrapper{
  height: 100vh;
  width: 400vw;
  display: flex;
  transform: rotate(90deg) translateY(-59rem);
  transform-origin: top left;
}


section{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first{
  background-color: #ebe8e0 ;
}
.second{
  background-color: #ebe8e0;
}
.third{
  background-color: silver;
  /* transform: rotate(-90deg); */
  /* transform-origin: top left; */
}
.fourth{
  background-color: mediumaquamarine;
}

I was trying to build a horizontal scrolling portfolio to get my first job. I tried increasing/decreasing the translate values but the alignment is still not matching properly.