fixed header spacing

styles/_docs.scss

@@ -101,8 +101,19 @@
     margin:auto;
   }
 
-  .page-docs .video-grid {
+  .page-docs {
-    grid-gap: 35px;
+    section {
+      margin-top: 64px;
+      margin-bottom: 64px;
+    }
+
+    .video-grid {
+      grid-gap: 35px;
+    }
+
+    .title-space {
+      margin-bottom: 16px;
+    }
   }
 
   .flat-card-grid {

template/page-docs.html.jinja

@@ -7,11 +7,11 @@
 {% block main %}
 
 <div class="landing page-docs landing-builtin-bg overflow-hidden styled-page">
-  <section class="py-26 text-center">
+  <section class="text-center title-space">
-    <div class="col-xl-4 col-lg-9 mx-auto text-center">
+    <div class="col-lg-9 mx-auto text-center">
-      <div class="d-flex flex-column-reverse w-100">
+      <div class="d-flex flex-column-reverse">
-        <h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
+        <h1 class="">{% trans %}XRP Ledger Developer Resources{% endtrans %}</h1>
-        <h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
+        <h6 class="eyebrow mb-3">{% trans %}Documentation{% endtrans %}</h6>
       </div>
     </div>
   </section>
@@ -202,8 +202,6 @@
     ]
   %}
 
-  {# TODO: Add the FlatCards section at the top #}
-
   <section class="text-left">
     <div class="mx-auto mb-10">
       <h4>Getting Started with XRP Ledger</h4>
@@ -233,7 +231,7 @@
     </div>
   </section>
 
-  <section class="py-26 text-left">
+  <section class="text-left">
     <div class="card-grid card-grid-2xN">
       <div class="col">
         <h6>Explore SDKs</h6>