Итак, я хочу, чтобы заголовок «Информация и советы» располагался над другими элементами div, однако я не могу добиться этого с помощью flexbox. Я думал, что назначение контейнера div для гибкого направления столбца позволит достичь этого, но заголовок div все еще находится слева от других элементов div.
html:
<div class="Container">
<div class="mainWrapper">
<div class="headerWrapper">
<h1>Information & Advice</h1>
<h2>From The Daylight Experts</h2>
</div>
<div class="wrapper">
<app-carousel></app-carousel>
<app-guides></app-guides>
</div>
<div class="instagramWrapper">
<app-instagram></app-instagram>
</div>
</div>
css:
.Container {
padding: 0;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
/* you need this to move content side by side */
flex-direction: column;
/* provide the width for parent */
width: 100%;
}
.headerWrapper {
width:100%;
}
.mainWrapper {
display: flex;
}
.wrapper {
width: 780px;
}
.instagramWrapper {
width: 500px;
padding-left: 10px;
margin-left: 2px;
}