fix box uneven margin due to box shadow

index.html

@@ -24,8 +24,8 @@
     </div>
   </header>
 
-  <div class="vertical">
+  <div class="vertical align-center">
-    <div class="splash expand space-between">
+    <div class="splash space-between">
       
       <div class="splash-text-content">
         <h1 >

static/serverscoop.css

@@ -5,6 +5,8 @@ body {
   justify-content: center;
   background-color: var(--background);
   font-family: var(--font-family-sans);
+  margin: 0;
+  padding: 0;
 }
 
 main {
@@ -20,7 +22,8 @@ main {
 }
 @media screen and (max-width: 786px) {
   main {
-    width: var(--width-mobile);
+    padding: 0;
+    width: 100%;
   }
 }
 
@@ -50,7 +53,7 @@ h3 {
 
 header {
   margin-top: 1.5vh;
-  margin-right: 8vw;
+  margin-right: 220px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -74,6 +77,8 @@ header img {
   width: 316px;
 }
 
+
+
 @media screen and (max-width: 1280px) {
   header {
     margin-top: 0.4rem;
@@ -103,6 +108,7 @@ header img {
 .splash {
   display: flex;
   flex-direction: row;
+  width: 100%;
   margin-top:   2rem;  
 }
 
@@ -139,6 +145,17 @@ header img {
 .splash > .button-links {
   display: none;
 }
+/* on large screens, move the logo & splash stuff away from the left gutter a bit*/
+@media screen and (min-width: 1280px) {
+  .splash-text-content h1,
+  .splash-text-content p,
+  .button-links,
+  header img {
+    margin-left: 2rem;
+  }
+}
+
+/*  on smaller screens move the button links out of the splash, below the pyramid image*/
 @media screen and (max-width: 1280px) {
   .splash {
     margin-top: 0;
@@ -168,8 +185,14 @@ header img {
     margin-bottom: 80px;
     display: flex;
   }
+  .pyramid-image {
+    right: 0;
+  }
 }
 @media screen and (max-width: 768px) {
+  .splash {
+    width: var(--width-mobile);
+  }
   .splash-text-content {
     text-align: initial;
   }
@@ -196,6 +219,7 @@ header img {
 
 
 
+
 .button-link {
   font-family: var(--font-family-mono);
   padding: 15px 22px;
@@ -225,7 +249,7 @@ header img {
 }
 @media screen and (max-width: 768px) {
   .background-tilt-top, .background-tilt-bottom {
-    width: var(--width-mobile);
+    width: 100%;
   }
 }
 
@@ -248,6 +272,7 @@ header img {
   background: var(--white);
   box-shadow: 10px 10px 0 0 var(--accent);
   margin: 20px;
+  margin-right: 30px;
   text-align: left;
 }
 
@@ -290,6 +315,9 @@ header img {
   .main-content-footer p {
     max-width: 70%;
   }
+  .main-content-paragraph {
+    max-width: 80%;
+  }
 }
 @media screen and (max-width: 768px) {
   .main-content h1 {