Remove whitespace below flexbox container - html

Question

I am trying to design a landing page where different sections have different background-colors. The first section container (brown background) is a Flexbox to position the child elements. Below the first section comes another container (blue background) that also spans the whole width of the page.
Problem: There is some whitespace between the two containers, that I can't remove.
body {
margin: 0;
}
.about-container {
width: 100%;
height: 490px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: #605B56;
}
#title {
font-size: 28px;
font-weight: 200;
color: #8EB8E5;
}
.pic {
width: 200px;
height: 200px;
border-radius: 50%;
background: #8EB8E5;
}
p {
text-align: right;
color: $white;
}
h3 {
text-align: center;
}
.section-container {
background: #8EB8E5;
}
<div class="about-container">
<div class="about-text">
<h3 id="title">Title</h3>
<p> Lorem ipsum dolor sit amet</p>
</div>
<div class="pic"></div>
</div>
<div class="section-container">
<h3>
Section Title
</h3>
Some text for the next section
</div>
JSFiddle: https://jsfiddle.net/z4oecan1/

Answer 1

Your <h3> elements have a default margin; remove it. use padding on the <h3> instead if you need to push it down.
body {
margin: 0;
}
.about-container {
width: 100%;
height: 490px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: #605B56;
}
#title {
font-size: 28px;
font-weight: 200;
color: #8EB8E5;
}
.pic {
width: 200px;
height: 200px;
border-radius: 50%;
background: #8EB8E5;
}
p {
text-align: right;
color: $white;
}
h3 {
text-align: center;
margin: 0;
}
.section-container {
background: #8EB8E5;
}
<div class="about-container">
<div class="about-text">
<h3 id="title">Title</h3>
<p> Lorem ipsum dolor sit amet</p>
</div>
<div class="pic"></div>
</div>
<div class="section-container">
<h3>
Section Title
</h3>
Some text for the next section
</div>
Another option is to leave the margins as-is and add overflow:auto to the section-container div to fix the collapsed margins.
body {
margin: 0;
}
.about-container {
width: 100%;
height: 490px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: #605B56;
}
#title {
font-size: 28px;
font-weight: 200;
color: #8EB8E5;
}
.pic {
width: 200px;
height: 200px;
border-radius: 50%;
background: #8EB8E5;
}
p {
text-align: right;
color: $white;
}
h3 {
text-align: center;
}
.section-container {
background: #8EB8E5;
overflow:auto;
}
<div class="about-container">
<div class="about-text">
<h3 id="title">Title</h3>
<p> Lorem ipsum dolor sit amet</p>
</div>
<div class="pic"></div>
</div>
<div class="section-container">
<h3>
Section Title
</h3>
Some text for the next section
</div>

Answer 2

It's due to the default margin-top of the h3 in the second section, which exceeds its container (collapsing margins....)
To avoid that, set margin-top: 0 for that h3, and to recreate the space above it, add a padding-top to it.
https://jsfiddle.net/031p3m04/1/