Problem with overlapping divs on mobile device - css

Question

I'm using the class vh-100 to make a multiple screen / section design. Idea being it's Step 1, 2 etc..
Seems to work absolutley fine on a desktop device, but when shrinking screen down to a sm device, overything seems to overlap.
I am using flex utils to align-items to the center of the section, but it overlaps on a mobile.
JS Fiddle can be seen here : https://jsfiddle.net/km3v12gz/
Any ideas or reasons why this would happen?
HTML is :
<section id="step-1" class="vh-100 align-items-center d-flex position-relative">
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 mb-4 mb-sm-0">
<div class="text-center">
<h2 class="mb-4">Select an option</h2>
<a class="button -primary u-block-mobile d-inline-block mr-2 mt-1 mt-sm-0" href="#">Sell</a>
<a class="button -primary u-block-mobile d-inline-block mb-2 mt-1 mt-sm-0" href="#">Rent</a>
</div><!-- /.text-center -->
</div><!-- /.col-sm-8 -->
<div class="col-12 col-sm-4">
<div class="text-center">
<h2 class="mb-4">Enter your postcode</h2>
</div><!-- /.text-center -->
<input class="postcode form__input -light w-100 mb-3 text-center" name="postcode" type="text" placeholder="Enter Postcode">
<button class="button -secondary w-100 find-address" type="submit">Find Address</button>
<div class="hidden-addresses mt-3 mb-3" style="display: none;">
<div class="row">
<div class="col">
<select class="addresses">
<!-- /jQuery Populate -->
</select>
</div>
</div><!-- /.row -->
</div><!-- /.hidden-address -->
<div class="hidden-address mt-3 mb-3" style="display:none;">
<p>Address of Property:</p>
<div class="property-address">
<!-- /.jQuery Populated -->
</div><!-- /.property-address -->
</div><!-- /.hidden-address -->
<div class="d-block mt-2">
Enter your address manually
</div><!-- /.d-block -->
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<section>
<div class="vh-100 align-items-center d-flex position-relative flex-grow-1">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Choose a date & time</h3>
</div><!-- /.text-center -->
<div class="row">
<div class="col">
<div class="text-center">
<strong class="d-block mb-4">February
/ March
2020
</strong>
</div><!-- /.text-center -->
</div><!-- /.col -->
</div><!-- /.row -->
<div class="pl-2 pr-2 pl-sm-5 pr-sm-5">
<div class="row seven-cols">
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Sa</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-22">
22
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Su</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-23">
23
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Mo</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-24">
24
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Tu</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-25">
25
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">We</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-26">
26
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Th</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-27">
27
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Fr</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-28">
28
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-29">
29
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-01">
01
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-02">
02
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-03">
03
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-04">
04
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-05">
05
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-06">
06
</a>
</div><!-- /.text-center -->
</div>
<div class="col-12 mt-3 mb-3">
<div class="row slots">
<!-- /.jQuery -->
</div><!-- /.slots -->
</div><!-- /.col-12 -->
</div><!-- /.row -->
</div><!-- /.pl-5 -->
</div><!-- /.col-6 -->
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Your Details</h3>
</div><!-- /.text-center -->
</div><!-- /.col-6 -->
</div><!-- /.row -->
</div>
</div><!-- /.align-items-center -->
</section>
Thanks