У меня проблема с созданием гибких секций одинакового размера, как показано здесь (не обращайте внимания на стиль кнопок): 
Я хотел бы сделать заголовки и текст одинакового размера в каждом разделе, поэтому текст не будет скользить вниз, вправо или влево, а в некоторых странных случаях мой текст не следует правилу text-align: center; хотя он написан на инструментах разработчика.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XeDA+ - sklep internetowy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-flex">
<main class="about-us-75 d-flex flex-wrap text-center">
<article class="fb-100 d-flex flex-wrap">
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Możesz nam zaufać - my nie gryziemy</h4>
<p>No może trochę, tych co są wobec Ciebie niesympatyczni. Nasza firma jest skupiona na kliencie i dokładamy wszelkich starań, aby dobrać pogodny i doświadczony zespół.
Dla nas liczy się przede wszystkim dobro klienta oraz satysfakcja z przemyślanego zakupu.</p>
</section>
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Reklamacje to u nas nie problem. Pomagamy je rozwiązać.</h4>
<p>Dokładamy wszelkich starań, aby obsługa klienta w naszej firmie była na najwyższym poziomie, stąd też przyjmujemy na nasze stanowiska tylko doświadczonych pracowników i szanujemy prawa konsumentów oraz nabywców naszych usług i produktów. U nas nie ma sporów, są tylko pozytywne rozmowy :).</p>
</section>
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Jesteśmy otwarci na propozycje 24/7.
Twoja opinia jest dla nas istotna.</h4>
<p>Nie wrzucamy waszych opinii i feedbacku do kosza, przekazujemy je wprost do naszego zespołu ds. projektowania i logistyki. Na każdą opinię odpowiadamy, oraz odpowiadamy czy planujemy wprowadzić zaproponowane funkcjonalności, a jeśli to podajemy również przewidywalny termin realizacji :).</p>
</section>
</article>
<article class="d-flex flex-wrap fb-100 text-center">
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Dlaczego my, a nie - on, ona, ono.</h4>
<p>Nie my, lecz WY. Wy, klienci stanowicie źródło dochodów dzięki którym możemy się rozwijać. Jesteśmy jedyną firmą, która nakłada tak dużą uwagę na dobro klienta. Nie próbujemy Cię przekonywać do naszej firmy, jesteśmy zadowoleni z Twojej decyzji nt. firmy, którą wybierzesz tak długo, jak ty sam jesteś szczęśliwy :).</p>
</section>
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Co oferujemy? Czym się zajmujemy?</h4>
<p>Zajmujemy się mnóstwem rzeczy. Między innymi jest to:</p>
<p>- satysfakcja klienta,</p>
<p>- logistyka i rozwiązywanie problemów,</p>
<p>- tworzenie stron internetowych,</p>
<p>- pomoc zdalna,</p>
<p>- korepetycje z angielskiego.</p>
<p>W przyszłości może będzie więcej rzeczy, które będziemy oferować :).</p>
</section>
<section class="fb-33 d-flex flex-wrap">
<h4 class="heading-about-us">Gwarancja jakości.</h4>
<p>U nas możesz spodziewać się jakości i doświadczenia jeśli jest inaczej oferujemy miesiąc czasu na zwrot kosztów w przypadku tworzenia stron i korepetycji w przypadku gdy nie podniosły one poziomu wiedzy. Jesteśmy również skłonni porozmawiać i wyjaśnić nieścisłości oraz zawsze stoimy po stronie klienta :).</p>
</section>
</article>
</main>
<aside class="about-us-25 d-flex flex-wrap text-center">
<article class="fb-100 d-flex flex-wrap">
<section class="fb-100">
<h4 class="heading-aside">Dowiedz się o promocjach!</h4>
<h4 class="heading-aside">Zapisz się na newsletter.</h4>
<label for="email"><input name="email" type="email"></label>
<input type="submit" value="Zapisz się">
</section>
</article>
<article class="fb-100 d-flex flex-wrap">
<section class="fb-100">
<h4 class="heading-aside">Promocja!</h4>
<p class="text-aside">Z kodem "COVID-19" oszczędzasz na korepetycjach z języka angielskiego o 25!</p>
<p class="text-aside">Ucz się języka na odległość, chroń nauczycieli i siebie od możliwego zagrożenia.</p>
</section>
</article>
</aside>
</div>
</body>
</html>
CSS:
/* fonts used */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* cleaning garbage */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* use that font */
body {
font-family: 'Noto Sans', sans-serif;
}
/* container flex */
.container-flex {
display: flex;
flex-wrap: wrap;
}
/* about us */
main.about-us-75 {
flex-basis: 75%;
}
.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.fb-100 {
flex-basis: 100%;
}
.fb-33 {
flex-basis: 33%;
}
main>article section {
padding: 5% 2% 5%;
}
main>article:nth-child(2) section {
padding-top: 10%;
}
main>article section>h4 {
color: #707070;
font-size: 26px;
}
main>article section>p {
color: #707070;
font-size: 20px;
}
.heading-about-us {
padding-bottom: 15%;
}
/* newsletter and offers - aside */
aside.about-us-25 {
flex-basis: 25%;
}
aside>article section {
padding: 5% 2% 5%;
}
aside>article:nth-child(2) section {
padding-top: 10%;
}
.text-center {
text-align: center;
}
.heading-aside {
font-size: 26px;
color: #707070;
}
.text-aside {
font-size: 20px;
color: #707070;
}
Я не знаю, почему id плохо масштабируется. Может быть, некоторые отступы не так. Спасибо за чтение.