diff --git a/index.html b/index.html
index 46a7290..6f7aa2c 100644
--- a/index.html
+++ b/index.html
@@ -44,14 +44,14 @@
           </div>
 
           <div class="splash-image-content">
-            <div class="position-absolute">
+            <div class="magical-flying-div-anchor">
               <img
                 alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
-                src="static/pyramid.svg"
+                src="static/pyramid.png"
                 class="pyramid-image"
               />
             </div>
-            <div class="position-absolute">
+            <div class="magical-flying-div-anchor">
               <img
                 alt="A cute looking person squatting like a hipster"
                 src="static/squatting-person.svg"
@@ -125,7 +125,7 @@
           </div>
         </div>
         <div class="horizontal expand justify-center">
-          <div class="position-absolute">
+          <div class="magical-flying-div-anchor">
             <img
               alt="two nerds looking smug, confident, and happy"
               src="static/arms-crossed-people.svg"
diff --git a/static/serverscoop.css b/static/serverscoop.css
index 75a7811..d342195 100644
--- a/static/serverscoop.css
+++ b/static/serverscoop.css
@@ -133,18 +133,27 @@ header img {
 .splash-image-content {
   display: flex;
   flex-direction: row;
-  justify-content: right;
+  justify-content: flex-end;
   height: 520px;
+  width: 100%;
+
 }
 
 .pyramid-image {
   position: relative;
+
+  /* 0 pixels away from the right hand side of the container, 636px wide */
+  right: calc(0px + 636px);
+  width: 636px;
 }
 
 .squatting-person {
   position: relative;
   top: 360px;
-  right: 532px;
+
+  /* 532 pixels away from the right hand side of the container, 173px wide */
+  right: calc(532px + 173px);
+  width: 173px;
 }
 .splash > .button-links {
   display: none;
@@ -187,9 +196,6 @@ header {
     margin-top: 100px;
     display: flex;
   }
-  .pyramid-image {
-    right: 0;
-  }
 }
 @media screen and (max-width: 768px) {
 
@@ -205,12 +211,14 @@ header {
   }
   .pyramid-image {
     position: relative;
+
+    /*  1.5vw away from the right hand side of the container, 85vw wide */
     width: 85vw;
-    right: 3vw;
+    right: calc(1.5vw + 85vw);
   }
   .squatting-person {
     top: 42vw;
-    right: 74vw;
+    right: calc(72vw + 23vw);
     width: 23vw;
   }
   .splash > .button-links {
@@ -303,6 +311,9 @@ header {
 .arms-crossed-people-image {
   position: relative;
   top: -10px;
+
+  /*  180px wide, so shift half 180px to center it. */
+  right: calc(0px + (180px * 0.5));
   width: 180px;
 }
 
@@ -315,6 +326,7 @@ header {
 
 @media screen and (max-width: 1280px) {
   .arms-crossed-people-image {
+    right: calc(0px + (150px * 0.5));
     width: 150px;
     top: -30px;
   }
@@ -339,6 +351,7 @@ header {
   }
 
   .arms-crossed-people-image {
+    right: calc(0px + (120px * 0.5));
     width: 120px;
     top: -50px;
   }
@@ -361,8 +374,10 @@ footer {
   margin-bottom: 100px;
 }
 
-.position-absolute {
+.magical-flying-div-anchor {
   position: absolute;
+  width: 0;
+  height: 0;
 }
 
 .horizontal {