Cześć, mam problem z blokami w display inline-block otóż gdy w oby dwóch blokach jest identyczny tekst to poziomo są równo z sobą, ale jeśli do jednego bloka dodam więcej tekstu to on zmienia położenie. W czym jest powód problemu bo ja nie mam pojęcia, proszę o pomoc
<!DOCTYPE HTML>
<html lang="pl">
<head>
<!-- kodowanie znaków, możemy używać polskich znaków -->
<meta charset="utf-8" />
<!-- sposób wyświetlania na urządzeniach mobilnych -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- tytuł stron. m.in. w wynikach wyszukiwania -->
<title> RIO GRAPPLING CLUB</title>
<!-- importujemy czcionkę, żeby jej użyć -->
<!-- Czcionka Baloo Bhaina2 -->
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500&family=Teko&family=Ubuntu&display=swap" rel="stylesheet">
<!-- ikonka strony -->
<link rel="icon" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="logo">
<img src="img/logo.png" alt="logo"></div>
<nav class="nav">
<a class="btn1" href="#">Strona główna</a>
<a class="btn2" href="#">Aktualności</a>
<a class="btn7" href="#">Harmonogram treningów</a>
<a class="btn3" href="#">Trener</a>
<a class="btn4" href="#">Historia bjj</a>
<a class="btn5" href="#">Mma</a>
<a class="btn6" href="#">Pytania-faq</a>
<a class="btn7" href="#">Kontakt</a>
</nav>
<button class="button1">Odbierz darmowy trening</button>
<header>
<section class="description">
<div class="description1">
<h1>Dlaczego jest dobre dla dzieci i młodzieży</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, harum aspernatur aut natus quae, perspiciatis laudantium dolores quod. Nam modi culpa nostrum dolore, laudantium, ut? Mollitia ipsum quod id?</p>
</div>
<div class="description2">
<h1>Dlaczego jest dobre dla dzieci i młodzieży </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur sequi illo repellendus porro dolore, magnam eligendi laudantium, ipsa quisquam ipsam earum delectus aliquid, magni deleniti nemo saepe similique corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, incidunt voluptatibus autem facilis et fugiat minus, repellat illum ab tempora, quas ex! Assumenda voluptatibus sapiente aliquam dolor excepturi autem fugiat.</p>
</div>
</section>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Określenie właściwości globalnych */
html {
font-family: roboto, arial, sans-serif;
font-size: 10px;
background: white;
}
nav {
margin-top: 50px;
margin-left: 20px;
position: absolute;
display: inline-block;
background: white;
}
nav a {
display: inline-block;
text-decoration: none;
font-size: 1.9rem;
font-family: exo;
color: black;
text-transform: uppercase;
padding: 10px;
margin: 5px;
}
.logo {
display: inline-block;
margin: 20px;
}
nav a:hover {
border-bottom: 3px solid #2f9339;
}
.button1 {
border: 3px solid #2f9339;
height: 50px;
text-align: center;
background: white;
width: 300px;
float: right;
margin-top: 120px;
margin-right: 300px;
text-transform: uppercase;
font-family: exo;
font-size: 1.9rem;
transition: 0.2s;
}
.button1:hover {
background-color: #2f9339;
/* Green */
color: white;
}
header {
margin-top: 100px;
}
.description {}
.description1 {
display: flex;
background: red;
display: inline-block;
box-sizing: border-box;
width: 20%;
height: 300px;
}
.description2 {
margin-top: 0px;
display: inline-block;
box-sizing: border-box;
height: 300px;
width: 20%;
background: red;
}
main {
min-height: 50vh;
background-color: white;
}
