Fix alignment of button in video section

styles/_docs.scss

@@ -110,6 +110,11 @@
 
 .page-docs-index {
 
+  section {
+    padding-top: 64px;
+    padding-bottom:64px;
+  }
+
   .dev-tools-link {
     h6::before {
       margin-top: -20px;
@@ -306,11 +311,13 @@
   }
 }
 
-.align-button-on-bottom {
+// On mobile the vertical spacing is correct without adjustment.
-  
+@media (min-width: 992px) {
-  .btn-primary {
+  .align-button-on-bottom {
-    position: absolute;
+    .btn-primary {
-    bottom: 0;
+      position: absolute;
+      bottom: 0;
+    }
   }
 }
 

template/page-docs.html.jinja

@@ -237,7 +237,7 @@
   ]
   %}
 
-  <section class="container-new py-26">
+  <section class="container-new ">
     <div class="nav card-grid flat-card-grid card-grid-3xN">
       <div class="col">
         {{ flatCard("./concepts.html", 
@@ -263,7 +263,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26">
+  <section class="container-new">
     <h4 class="pb-4">Use Cases</h4>
     <div class="card-grid card-grid-3xN use-cases">
       {% for useCase in useCases %}
@@ -272,7 +272,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26">
+  <section class="container-new ">
     <h4 class="pb-4">Getting Started</h4>
     <div class="card-grid card-grid-2xN quickstart-card">
       <div class="col">
@@ -309,7 +309,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26">
+  <section class="container-new ">
     <div class="d-flex flex-column-reverse col-sm-8 p-0">
       <h3 class="h4 h2-sm">Interact with the XRP Ledger in a language of your choice</h3>
       <h6 class="eyebrow mb-3">Explore SDKs</h6>
@@ -354,7 +354,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26">
+  <section class="container-new ">
     <h4 class="pb-4">Intermediate Learning Sources</h4>
     <div class="card-grid card-grid-3xN">
       {% for video in intermediateVideos %}
@@ -363,7 +363,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26">
+  <section class="container-new ">
     <div class="card-grid card-grid-2xN">
       <div class="col d-flex align-items-center justify-content-center">
         <img
@@ -388,7 +388,7 @@
     </div>
   </section>
 
-  <section class="container-new py-26" id="docs-browse-by">
+  <section class="container-new " id="docs-browse-by">
     <div class="row card-grid card-grid-2xN">
       <div class="col" id="popular-topics">
        
@@ -412,7 +412,7 @@
       </div>
     </div>
   </section><!-- Browse by recommended and Generate Testnet Credentials -->
-  <section class="container-new full-documentation-link">
+  <section class="container-new">
     <a href="./docs-index.html" class="external-link mr-auto">See full documenation index <i aria-hidden="true" class="fa fa-external-link"></i></a>
   </section>
 {% endblock %}