Привет, ребята, я создал меню, используя flexbox и определил образ героя в CSS, все работает нормально, но когда я хочу добавить другой раздел под изображением, используя flexbox, он показывает поверх первого. Мне нужно показать это в первом разделе (как поведение по умолчанию). Я пытался определить позиции, но я сделал так много изменений, и теперь я в замешательстве, поэтому мне нужна ваша помощь, чтобы найти правильный путь.
@import url('https://fonts.googleapis.com/css?family=Work+Sans:600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kalam:700&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
li,a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
text-decoration: none;
}
.logo {
font-family: "Work Sans", sans-serif;
color: aliceblue;
}
header {
display: flex;
justify-content: space-between;
padding: 30px 10%;
align-items: center;
width: 100%;
position: relative;
}
.hero{
background-image:
linear-gradient(to bottom, rgba(0,0,0, 0.52), rgba(0,0,0, 0.5)),
url('https://cdn.pixabay.com/photo/2018/03/31/19/29/schnitzel-3279045_960_720.jpg');
height: 100%;
background-size: cover;
width: 100%;
position: absolute;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
h1.title {
color: aliceblue;
font-family: "Kalam",sans-serif;
font-weight: 700;
font-size: 5rem;
}
h3.podnadpis {
color: aliceblue;
font-family: "Montserrat", sans-serif;
font-weight: 300;
}
button {
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 1em;
padding: 1em 2em;
cursor: pointer;
font-family: "Montserrat", sans-serif;
}
button {
color: var(--color);
transition: 0.25s;
}
button:hover, button:focus {
border-color: var(--hover);
color: #000;
background-color: #e5ff60;
}
.raise:hover,
.raise:focus {
box-shadow: 0 0.5em 0.5em -0.4em #e5ff60;
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.raise {
--color: #ffa260;
--hover: #e5ff60;
}
li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
li a {
transition: all 0.3 ease 0s;
}
li a:hover {
color: green;
}
section.about {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
position: relative;
flex: 1;
flex-direction: row;
padding: 30px 10%;
}
p {
color: #000;
}
.divider {
width: 1px;
background-color: black;
height: 100px;
}
.left {
width: 45%;
height: auto;
}
.right {
width: 45%;
height: auto;
padding-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Restaurant</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="text">
<h1 class="title">Lorem ipsum</h1>
<h3 class="podnadpis">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
<button class="raise">Lorem ipsum</button>
</div>
</div>
<header>
<div class="logo"><a href="#"><h1>Restaurant</h1></a></div>
<nav>
<ul class="nav__link">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="about">
<div class="left"></div>
<div class="divider"></div>
<div class="right"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text evesince the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div>
</section>
</div>
</body>
</html>