Vertical and Horizontal Scrolling Website - html

Question

I am working on a website (one pager) which is built after a cross. The vertical scroll works well and is solved with CSS (scroll-snap-type etc.) The problem is in the horizontal scroll and namely the problem is that if you scroll horizontally and then scroll vertically logically comes a blank page. How to solve this problem best (as explained in the sketch (arrow 1)) that the page info is called. Every "page" has a vh 100. The vertical Scroll is with vh 100 and vw200 (2 Pages)
EDIT: If you run the code snipped you can see, that if you use the horizontal slide the second slide is blocked if you scroll down. This is my Problem. I want to jump to the site infos / (subscription-container)
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: white;
}
h1{
font-weight: normal;
}
#font-face {
font-family: 'besom_extendedregular';
src: url('../src/webfonts/besom-extended-webfont.woff2') format('woff2'),
url('../src/webfonts/besom-extended-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.main-container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
scroll-behavior: smooth;
}
.navi{
position: fixed;
}
.hero{
height: 100vh;
background-color: beige;
background-position: center;
background-size: cover;
scroll-snap-align: start;
}
.logo-section{
justify-content: center;
display: flex;
padding: 150px;
/* height: 100vh; */
}
.logo-section img{
/* position: absolute; */
max-width: 70%;
max-height: 270px;
}
.content-container{
height: 100vh;
width: 400vw;
background-color: black;
scroll-snap-align: start;
flex-direction: row;
display: flex;
}
.content-container .first{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
background-color: brown;
}
.content-container .story{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
background-color: red;
}
.subscription-container{
height: 100vh;
background-color: black;
scroll-snap-align: start;
padding-top: 80px;
padding-left: 150px;
padding-right: 150px;
}
.bottom-container{
height: 100vh;
background-color: black;
scroll-snap-align: start;
padding-top: 80px;
}
.footer-nav-main{
float: left;
display: flex;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
margin-left: 35px;
margin-right: 35px;
}
.footer-main{
margin-top: 80vh;
}
<div class="main-container">
<section class="hero">
<div class="logo-section">
<img class="logo" src="" alt="Logo">
</div>
<div class="announcement-head">
<p>
Title
</p>
</div>
<div class="announcement-text">
<p>
Subtitle
</p>
</div>
</section>
<div id="content-container" class="content-container">
<section id="first" class="first">
<div>
<h1>First</h1>
Story
</div>
</section>
<section id="story" class="story">
<div>
<h1>Story 1</h1>
First
</div>
</section>
</div>
<section class="subscription-container">
<div class="main-head">
<h1>Dream with us !</h1>
</div>
<div class="main-text">
<p>
text section
</p>
</div>
</section>
<section class="bottom-container">
<div><h1>Bottom Container</h1></div>
<div class="footer-main">
<ul class="footer-nav-main">
<li>Foot1</li>
<p>/</p>
<li>Foot2</li>
<p>/</p>
<li>Foot3</li>
</ul>
<p class="bottom-text-copyright">© </p>
</div>
</section>
</div>

Answer 1

to block horizontally scrolling you can use overflow-y css property.add this code into your css file:
.body{
overflow-y: hidden;
overflow-x: auto;
}
this code automaticly removes horizontal scrool bar.