Вот код:
<div class="our">
<div class="ourPhilosophy"></div>
<h2 class="mainTag1">Our philosophy</h2>
<h2 class="middleText1">Etiam eget mi enim, non ultricies nisi voluptatem, illo<br> inventore veritatis et quasi architecto beatae vitae dicta<br> sunt explicabo nemo enim ipsam voluptatem.</h2>
<h2 class="bottomText1">Sed ut perspiciatis unde omnis iste natus error sit<br> voluptatem accusantium doloremque laudantium, totam<br> rem aperiam, eaque ipsa quae ab illo inventore veritatis et<br> quasi architecto beatae vitae dicta sunt explicabo. Donec ut<br> volutpat metus. Aliquam tortor lorem, fringilla tempor<br> dignissim at, pretium et arcu. Sed ut perspiciatis unde<br> omnis iste natus error sit voluptatem accusantium<br> doloremque laudantium, totam rem aperiam, eaque ipsa<br> quae ab illo inventore veritatis.</h2>
</div>
<div class="ourMission"></div>
<h2 class="mainTag2">Our mission</h2>
<h2 class="middleText2">Etiam eget mi enim, non ultricies nisi voluptatem, illo<br> inventore veritatis et quasi architecto beatae vitae dicta<br> sunt explicabo nemo enim ipsam voluptatem.</h2>
<h2 class="bottomText2">Sed ut perspiciatis unde omnis iste natus error sit<br> voluptatem accusantium doloremque laudantium, totam<br> rem aperiam, eaque ipsa quae ab illo inventore veritatis et<br> quasi architecto beatae vitae dicta sunt explicabo. Donec ut<br> volutpat metus. Aliquam tortor lorem, fringilla tempor<br> dignissim at, pretium et arcu. Sed ut perspiciatis unde<br> omnis iste natus error sit voluptatem accusantium<br> doloremque laudantium, totam rem aperiam, eaque ipsa<br> quae ab illo inventore veritatis.</h2>
</div>
<div class="ourHistory"></div>
<h2 class="mainTag3">Our history</h2>
<h2 class="middleText3">Etiam eget mi enim, non ultricies nisi voluptatem, illo<br> inventore veritatis et quasi architecto beatae vitae dicta<br> sunt explicabo nemo enim ipsam voluptatem.</h2>
<h2 class="bottomText3">Sed ut perspiciatis unde omnis iste natus error sit<br> voluptatem accusantium doloremque laudantium, totam<br> rem aperiam, eaque ipsa quae ab illo inventore veritatis et<br> quasi architecto beatae vitae dicta sunt explicabo. Donec ut<br> volutpat metus. Aliquam tortor lorem, fringilla tempor<br> dignissim at, pretium et arcu. Sed ut perspiciatis unde<br> omnis iste natus error sit voluptatem accusantium<br> doloremque laudantium, totam rem aperiam, eaque ipsa<br> quae ab illo inventore veritatis.</h2>
</div>
</div>
А также css:
.our{
padding-top: 45px;
display: flex;
}
.mainTag2, .mainTag3{
padding-top: 30px;
}
.mainTag1, .mainTag2, .mainTag3{
text-transform: uppercase;
font-size: 18px;
}
.middleText1, .middleText2, .middleText3{
font-size: 12px;
color: #b7b7b7;
padding: 30px 0;
}
В данном коде почему-то не работает display: flex, точнее работает не так, как задумано: у первого элемента (ourPhulosophy) теги h2 выравниваются, но я же обращаюсь к our, то есть к родителю, которому принадлежат ourPhilosophy, ourMission и ourHistory, но последние два элемента остаются на месте.
Примечание: эти три текстовых блока помещены в контейнер с шириной 960px и, возможно, они просто не могут туда влезть, но это не точно, поэтому прошу помощь.
А также третий элемент (ourHistory) ушел вне контейнера и он, скажем так, не принимает его, несмотря на то, что они все в общем div-е.
