Center sdk image and fix typos

styles/_docs.scss

@@ -1,7 +1,12 @@
 // Light mode
-.light .sdk-img{
+
+.sdk-img {
+  align-self: center;
+
+  .light {
     content:url(../assets/img/backgrounds/sdk-white.png);
   }
+}
 
 // Video Cards
 .get-started-img, .flat-card {
@@ -137,6 +142,7 @@
       padding: 32px 50px;
       height: 100%;
       width: 100%;
+      box-shadow: none;
     }
 
     .flat-card-padding {
@@ -159,6 +165,11 @@
   }
 }
 
+.center-image {
+  display: flex;
+  justify-content: center;
+}
+
 .quickstart-card {
   padding: 32px;
 

template/page-docs.html.jinja

@@ -204,7 +204,7 @@
 
   <section class="text-left">
     <div class="mx-auto mb-10">
-      <h4>Getting Started with XRP Ledger</h4>
+      <h4>Getting Started</h4>
     </div>
     <div class="card-grid flat-card-grid card-grid-3xN">
       <div class="col">
@@ -317,10 +317,10 @@
           </div>
         </div>
       </div>
-      <div class="col">
+      <div class="col center-image">
         <img
           src="/assets/img/backgrounds/sdk-black.png"
-          class="img-fluid pt-20 sdk-img"
+          class="img-fluid sdk-img"
         />
       </div>
     </div>
@@ -349,9 +349,7 @@
           <h6 class="mb-3">Explore Dev Tools</h6>
         </div>
         <p class="mb-20">
-          Use these web-based tools to assist during all stages of
+          Use these web-based tools to assist during all stages of development, from getting your first payment to testing your implementation for best practices.
-          development, from getting your first payment to testing your
-          implementation for best practices.{" "}
         </p>
         <div class="card-grid card-grid-2xN">
           {% for card in devTools %}