Row of cards not scrolling - html

Question

I have a row of cards that are sized so that two fit to the width of the screen then the next two appear below.
I am struggling to get the top of the #card row to be 10px below the #title-row above and to be at the bottom of the #main-container and scrolling if the screen isn't tall enough.
#card-row {
position: relative;
overflow: scroll;
width: 98%;
margin: 0;
bottom: 0;
}
#main-container {
overflow: hidden;
height: 100%;
width: 100%;
}
#title-text {
margin-top: 15px;
margin-bottom: 0px;
font-size: 80px;
color: black;
font-family: "CallingAngelsPersonalUse";
text-shadow: 4px 6px 12px #fff;
}
#date-text {
margin-top: -20px;
margin-bottom: 0px;
font-size: 45px;
color: black;
font-family: "Strawberry_Whipped_Cream";
text-shadow: 2px 4px 6px #fff;
}
#card-title {
font-family: "CallingAngelsPersonalUse";
font-size: 30px;
left: -5px;
bottom: -20px;
}
<div id="main-container" class="container">
<div id="title-row" class="row">
<div class="container center">
<div class="show-on-medium-and-up hide-on-small-only">
<p id="title-text">Scott and Viki</p>
<p id="date-text">23rd June 2018</p>
<a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:who#gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
</div>
</div>
</div>
<!-- Agenda Card -->
<div id="card-row" class="row">
<div class="col s12 m6">
<a href="#" onclick="$('#agenda-modal').modal('open');">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg" class="z-depth-4">
<span id="card-title" class="card-title">Order of the day</span>
</div>
</div>
</a>
</div>
<!-- Map Card -->
<div class="col s12 m6">
<a href="#" onclick="$('#map-modal').modal('open');" role="button" (click)="openChurchMap()">
<div class="card">
<div class="card-image">
<img src="./assets/1.jpg" class="z-depth-4">
<span id="card-title" class="card-title">Map's and Directions</span>
</div>
</div>
</a>
</div>
6 more cards as above
</div>
Currently, everything is where it should be but when you scroll the cards only move 10px or so. How can I fix this so its dynamic for all screens? Also the #card-row is hugging to the left which i cant get to center either?