Section of website being cut off - html

Question

Hi I have this portion of my website Link here to broken portion and for some reason, the bottom of one of my sections is cut off. If I add a different margin or padding to the main class I just get white area added and the bootstrap card still can't be read. Any ideas?
Picture:
HTML Code:
<div class="main">
<div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
<div class="filter"></div>
<div class="container-fluid">
<div class="motto">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<div class="space-top"></div>
<h2 class="title">Services</h2>
</div>
<div class="container">
<div class="space-top"></div>
<div class="card" data-background="color" data-color="blue">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-car-mechanic"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Roadside Assistance</h4>
<p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="green">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-people-carry"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Hauling</h4>
<p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Loading, transport and unloading covered.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="orange">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-home"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Exterior</h4>
<p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
Window washing, Light construction demolition, Fence demolition. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="brown">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-toolbox"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Interior</h4>
<p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
Baby proofing. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="yellow">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-shopping-basket"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Miscellaneous Services</h4>
<p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
Looking for something not on this list? Call for pricing/availability! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The template is from Creative Tim: Creative Tim's Website and the CSS used is the included CSS with minimal changes and nothing that should touch any of this.
What I've tried:
Adding margin/margin-bottom to the main, container-fluid, motto and row as well as padding/padding-bottom
I have tried to change the margin-top of the section below it.
I have tried to add space using both <br /> and the provided space-top class.
I can include more of the HTML for the section below if needed. I included a link to the site currently, you should be able to use inspect element to sift around with grabbing CSS but I can include CSS if need be. I couldn't find anywhere that said I could not post a link to my page directly but if I cannot please let me know and I will remove it.

Answer 1

The page-header element inside paper-kit.css has a max-height:
.page-header {
max-height: 999px;
}
You content must be taller than that max-height (not sure why one would set a max-height on a div in a vertical layout but oh well). Comment it out in the web dev tools and all looks fine.

Answer 2

there is a max height of 999px in the class page-header, which is limiting the height remove it