Html/css equipmetn -lading-page

[gmail.com]

This is the HTML code

Equipment-landing-page

<!-- Header section start -->
<header class="top-header">
        <nav class="navbar">
            <div class="nav-brand"><h2>Spyder</h2></div>        
            <div class="navbar-container">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#">Dumbbells</a></li>
                    <li class="nav-item"><a href="#">Kettlebells</a></li>
                    <li class="nav-item"><a href="#">Barbells & Racks</a></li>
                    <li class="nav-item"><a href="#">Apparel & Hats</a></li>
                    <li class="nav-item"><a href="#">Shop All</a></li>
                    <li class="nav-item"><a href="#">Deals</a></li>
                    <li class="nav-item search">Search</li>
                    <li class="nav-item"><a href="#">like</a></li>
                    <li class="nav-item"><a href="#">forms</a></li>
                    <li class="nav-item"><a href="#">shop</a></li>
                </ul>
            </div>
        </nav>
</header>
<!-- Header section ends -->

<!-- Main section starts -->

<main> 
<!-- Hero section starts -->
    <section class="hero">
        <div class="hero-container"> 
            <div class="left-text">                       
                <h4>Start building yours now.</h4>
                <div class="title">
                <h1><span>LEGACIES ARE BUILT THROUGH STRENGTH</span></h1>
                </div>
                <div class="hero-button">
                    <button type="submit" value="submit">Let's start</button>
                    <button class="arrow-button">
                        <div class="arrow"></div>
                        <div class="circle"></div>
                    </button>
                </div>
            </div>
            <div class="hero-item">
                <img src="Images/pexels-ivan-samkov-4164507.jpg" alt="Pexels-ivan-samkov">
            </div>
        </div>
    </section>
<!-- Hero section ends -->

<!-- Official section starts -->
    <section class="official">
        <div class="official-container">
            <div class="official-header">
                <h2>Our Official section for you</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At minus cumque laborum ad officiis cupiditate illum illo. 
                </p>
            </div>

            <div class="official-products">
                <img src="Images/products/indoor-bike.jpg" alt="Treadmil">                        
                <img src="Images/pexels-tima-miroshnichenko.jpg" alt="">
            </div>
            <div class="official-button">
                <button type="button"><a href="#" style="color: black;">Explore</a></button>
            </div>                   
        </div>
    </section>
<!-- Official section ends -->
</main>

        <!-- Footer section starts -->
        <footer class="main-footer">
            <header class="last-header">
                <h2>Spyder</h2>
            </header>
            <hr  class="upper-hr"/>

            <hr class="lower-hr"/>
            <div class="inner-footer">
                <p><span><span class="bold">United States </span> &copy;, Spyder Strength. All rights reserved</span></p>
                <ul class="footer-list">
                    <li><a href="#">Privacy Police</a></li>
                    <li><a href="#">Terms of use</a></li>
                </ul>
            </div> 
        </footer>

This is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
margin: 0;
padding: 0;
height: 100vh;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.top-header{
height: 104px;
padding: 20px 84px;
}

/* GIving the same size */
.navbar, .official, .hero, footer{
max-width: 80%;
margin: 0 auto;
}
.section{
margin: 8px 0;
}

.navbar{
height: 60px;
padding: 0px;
border-radius: 15px;
background-color: #1a1010;
top: 0;
color: white;
display: flex;
justify-content: space-between;
}

.navbar-container{
height: 33px;
padding: 0;
margin: 13px 17px 17px;
display: flex;
justify-content: space-between;
}

.navbar-nav{
width: 100%;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
}
.nav-item{
height: 20px;
padding: 0 20px;
font-size: 14px;
}

ul li{
list-style-type: none;
display: flex;
flex-direction: r0w;
}
a{
color: white;
text-decoration: none;
}

.nav-brand, h2{

color: white;
margin: auto 10px;

}

/* Main section /
main{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
/ Enabled scrolling for the main element */
}

/* Hero section starts */
.hero{
margin: 0;
}
.hero-container{
width: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
max-height: 500px;
display: flex;
justify-content: space-between;
}
.left-text{
width: 35%;
display: flex;
flex-direction: column;
}
.hero-item{
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0;
padding: 2px 0 10px;

max-width: 100%;/* ensures the image won't exceed the width of container */
max-height: 100%; /* ensure the image wo't exceed the height of the container*/

/* hides any content that overflows the container */
}

.hero-item, img{
height: auto;
width: 500px;
border-radius: 30px; /* Added border-radius for rounded-corner */
}

h4, .title{
margin-top: 33px;
padding-top: 50px;
}

.title{
margin-top: 50px;
}

h1{
font-size: 50px;
margin: 10px 0 0 0;
padding: 0;
}

.hero-button{
margin-top: 50px;
padding-top: 30px;
}

button{
width: 100px;
height: 36px;
border-radius: 15px;
background-color: black;
color: white;
border-style: none;
}
.arrow-button{
position: relative;
width: 50px;
height: 40px;
border: none;
background-color: black;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.arrow{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-60deg);
width: 20px;
height: 2px;
background-color: #fff;
}

/* OFficial section starts */
.official{
position: relative;
bottom: 100px;
margin: 0;
padding: 40px 0;
}
.official-container{
border: 1px solid #1a1010;
border-radius: 30px;
background-color: #352f2f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 900px;
margin-top: 30px;
padding-top: 0;
gap: 80px;
}
.official-header{
text-align: center;
color: white;
margin: 0;
padding-bottom: 50px;
display: flex;
flex-direction: column;
}
h2, p{
margin-bottom: 8px;
}
p{
margin-top: 30px;
width: 536px;
}
.official-products{
border: 2px solid black;
border-radius: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 80%;
width: 86%;
gap: 30px;
margin: 0;
padding: 20px;
object-fit: cover;
}

.official-products img{
width: 106%;
}

.official-button button{
height: 50px;
width: 140px;
margin: 10px;
font-size: 20px;
font-weight: bold;
text-align: center;
border-radius: 18px;
color: #1a1010;
background-color: white;

}

/* Footer Section starts */
footer{
background-color: #141111;
text-align: center;
padding: 20px;
bottom: 0;
display: flex;
justify-content: space-between;
}

ul{
color: white;
}

/* Footer section starts */
.main-footer{
position: relative;
bottom: 50px;
margin-bottom: 50px;
width: 89%;
border-radius: 30px;
background-color: #352f2f;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.last-header{
display: flex;
align-items: flex-start;
}
p{
margin: 0;
text-align: start;
}
.lower-hr{
margin-top: 20px;
}

.inner-footer{
background-color:#352f2f;
color: rgb(184, 177, 177);
margin: 0;
font-size: 14px;
display: flex;
justify-content: space-between;
}
.footer-list{
display: flex;
align-items: end;
justify-content: space-evenly;
gap: 10px;
height: 20px;
}
.bold{
color: white;
font-weight: bolder;
}
/* Footer section Ends */

This is my first time doing this. The problem is that the top-header area and the hero section got stuck, it does not scroll along with the flow. How do you fix that?