Вот мой код HTML.
<body class="container full-height-grow">
<section class="home-main-section">
<div class="left-side">
<!-- <div class="left-side" style="border: 1px #ccc solid;"> -->
<!-- <h2 class="main-title">We help to make <span>sweet memories</span></h2> -->
<span class="small-text">We help to make</span>
<h2 class="big-text">sweet memories</h2>
<a href="#" class="btn">Shop Now</a>
</div>
<div class="image-wrapper">
<div class="cake-image">
<img src="./images/main-cake.png" alt="" />
</div>
</div>
</section>
<section class="second-main-seciton">
<div class="header-wrapper">
<header>
<h3>Deliver to your doorstep.</h3>
</header>
</div>
<div class="image-container">
<div class="image-gallery">
<a href="images/cakes/cake-1.jpg" class="cake-1">
<i class="icon ion-md-expand">iframe1</i>
</a>
</div>
</div>
</section>
</body>
Так выглядит моя текущая страница.
Как мне разместить " второй-основной-раздел"/" заголовок-оболочка"ниже" * главная-главная-секция "? Есть ли лучший способ разместить это без использования свойств CSS position?
Это мой CSS для контейнера тела.
body {
padding: 0;
margin: 0;
background-color: #fafafa;
font-family: Poppins, sans-serif;
font-size: 1.2rem;
/* min-height: 100vh; */
width: 100%;
height: 100%;
background-color: 1D1D1F;
}
.full-height-grow {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 100px;
}