Есть три секции, последняя - flexbox, содержащий три div блока. Почему-то при установке одинакового для всех секций max-width ширина секции А и секции B одинакова, а секция C, содержащая дивы, (ударение на У) уже. Пробовал использовать % вместо пикселей, авось что-то изменится, не изменилось)
https://codepen.io/Boryamba/pen/oNgjoOe
Также хотел дать секции C h2 элемент, но т.к. секция сделана в флексбоксе заголовок перемещается на тот же уровень, что и дивы.
https://codepen.io/Boryamba/pen/bGNVYyZ
Вопросы: как выровнять секции А, B и C, чтобы имели одинаковую ширину? Можно ли поместить заголовок в секции Ц над дивами без grid layout?
<section id="section-a">
<h2 class="section-head">Section A</h2>
<p>
Lorem ipsum...
</p>
</section>
<section id="section-b">
<h2 class="section-head">Section B</h2>
<p>
Lorem ipsum...
</p>
</section>
<section id="section-c">
<div class="box1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque nemo adipisci quibusdam
perferendis provident impedit?</div>
<div class="box2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis sed velit maiores sequi quibusdam
autem.</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, animi earum natus mollitia ex magni!
</div>
</section>
.section-head {
padding-bottom: 1em;
}
#section-a {
padding : 1.5em;
background-color: rgba(0, 139, 139, 0.4);
color : #fff;
text-align : center;
max-width : 900px;
margin : 0 auto;
}
#section-b {
padding : 1.5em;
background-color: rgba(139, 139, 139, 0.4);
color : #000;
text-align : center;
max-width : 900px;
margin : 0 auto;
}
#section-c {
display: flex;
max-width: 900px;
margin: 0 auto;
}
#section-c .box1, #section-c .box3 {
background-color: rgba(0, 139, 139, 0.4);
color: whitesmoke;
padding: 5px 20px;
}
#section-c .box2 {
padding: 5px 20px;
background-color: rgba(139, 139, 139, 0.4);
color: #000;
}