Maintain equal distances between sections - html

Question

I want to maintain equal distances between my sections. I've currently set the margin-bottom to 20%, which works great on desktop view and mobile view. But with the tablet the sections collide due to an image growing in size. Here's the code, any help is appreciated:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
section {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20%;
height: 100vh;
}
section .box {
padding: 50px;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
position: relative;
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>

Answer 1

Use flexbox. Wrap the following flex container around the sections:
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
And add the following ruleset to the section that contains the picture:
flex: 0 1 auto;
I wish you good luck job hunting.
SNIPPET
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
color: #fff;
}
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
section {
width: 100%;
margin: 0 auto;
}
section .box {
padding: 5px 20px;
margin: 20px auto;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
flex: 0 1 auto;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>