Section прибивает вверх всего что делать? вот структура html
<!DOCTYPE html>
<html lang="en">
@@include('_head.html')
<body>
<div class="wrapper">
@@include('_header.html')
<main class="page">
<div class="mainblock">
<div class="mainblock__container container">
<div class="mainblock__content">
<div class="mainblock__text text">
<div class="text__main">Get the Best<span> Solution</span> for Your <span>Business</span></div>
<div class="text__sub">
Accelerator photo sharing business school drop out ramen hustle crush it revenue traction
platforms. Coworking viral landing page user base.
</div>
</div>
<div class="mainblock__form form">
<div class="form__content">
<input type="text" placeholder="Your name" class="input req ren" />
<input type="text" placeholder="Your email" class="input req email" />
<input type="text" placeholder="Phone number" />
<input type="submit" value="Get Started" />
</div>
</div>
<div class="mainblock__anim anim">
<div class="anim__text">Register Now and Get FREE Trial</div>
<div class="anim__arrow">
<img src="img/icons/header/arr.png" alt="" />
</div>
</div>
</div>
<div class="mainblock__bg ibg">
<img src="img/icons/header/backjpeg.jpg" alt="" />
</div>
</div>
</div>
<div class="content"></div>
</main>
<div class="content">
<section id="about" class="about">
<div class="about__container container">
<div class="about__content">
<div class="about__column"><img src="img/0201.jpg" alt="PC" /></div>
<div class="about__column"></div>
</div>
</div>
</section>
</div>
@@include('_footer.html')
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
вот css
.wrapper {
width: 100%;
min-width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
&._loaded {
}
}
.page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
}
.mainblock {
flex: 1 0 100%;
position: relative;
&__content {
position: relative;
z-index: 2;
padding: 25% 0 22%;
@media (max-width: 486+px) {
padding: 42% 0 22%;
}
}
&__bg {
position: absolute;
top: 0;
width: 100%;
height: 80%;
left: 0;
}
}
.mainblock {
&__content {
margin: 0 auto;
}
вот что получается
Средний
