When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continued to align to the left of the other div elements.
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;
}