Strange vertical overflow when viewport is greater than medium - css

Question

I'm using bootstrap-sass to layout a some div elements in a vertical stack. But, I am having an issue when the viewport is above the md size the div elements overflow and produce a vertical scrollbar.
Demo https://nyc3.digitaloceanspaces.com/bingo-assets/index.html
Here's my grid.scss file:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
.row {
#include make-row();
}
#content {
#include container-fixed;
}
#promo-header {
#include make-sm-column(12);
}
#subscribe {
#include make-sm-column(12);
}
#video {
#include make-sm-column(12);
}
#factoid {
#include make-sm-column(12);
}
And below is the HTML:
<div id="content">
<div class="row">
<div id="promo-header">
<img width="100%" src="/images/promo.jpg">
</div>
<div id="subscribe">
<h2>Simply enter your details for a chance to win!</h2>
<form name="subscribe">
<div>
<label>Firstname</label>
<input type="text" name="firstname" />
</div>
<div>
<label>Surname</label>
<input type="text" name="surname" />
</div>
<div>
<label>Email</label>
<input type="text" name="email" />
</div>
<div>
<label>Telephone</label>
<input type="text" name="telephone" />
</div>
<div>
<label>Postcode</label>
<input type="text" name="postcode" />
</div>
<div>
<label>Have you seen this product on TV?</label>
<select name="question">
<option value>Please Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</div>
<button class="btn">Get Your Coupon</button>
<small>Please note: Only one coupon available per person and only one email address allowed per person. Coupon valid 02.10.17 - 31.03.18. Redeemable by UK residents 18+ only in participating stores only.</small>
</form>
</div>
<div id="video">
<div id="video-container">
<iframe src="https://www.youtube.com/embed/ZZa7Kgo0apA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="description">
<h2>Video Title</h2>
<p>Do you want to cook amazing meals?</p>
</div>
</div>
<div id="factoid">
<h2>Celebrity dietician Lucy Jones and Princes are working together to show families how they can eat well with canned fish.</h2>
<p>Did you know our fillers are:</p>
<ul>
<li>High in protein</li>
<li>Low in saturated fat</li>
<li>A quick and easy lunch</li>
</ul>
Learn More
</div>
</div>
</div>
I put a red border around each div. Here is what it looks like on a small or medium viewport:

Answer 1

The solution was to replace:
#include container-fixed;
with
#extend .container;
container-fixed appears to be a fluid container as can be seen from the fluid-container declaration:
.container-fluid {
#include container-fixed;
}