Update style.css

Setting maximum width to 420 pixels and rest jar components accordingly. For better presentation.

3-terrarium/solution/style.css

@@ -37,49 +37,55 @@ h1 {
   z-index: 2;
 }
 
-/*https://codepen.io/Rotarepmi/pen/rjpNZY*/
-
 .jar-walls {
   height: 80%;
   width: 60%;
+  max-width: 420px;
   background: #d1e1df;
   border-radius: 1rem;
   position: absolute;
   bottom: 0.5%;
-	left: 20%;
+  left: 50%;
+  transform: translateX(-50%);
   opacity: 0.5;
   z-index: 1;
 }
 
 .jar-top {
   width: 50%;
+  max-width: 350px;
   height: 5%;
   background: #d1e1df;
   position: absolute;
   bottom: 80.5%;
-	left: 25%;
+  left: 50%;
+  transform: translateX(-50%);
   opacity: 0.7;
   z-index: 1;
 }
 
 .jar-bottom {
   width: 50%;
+  max-width: 350px;
   height: 1%;
   background: #d1e1df;
   position: absolute;
   bottom: 0%;
-	left: 25%;
+  left: 50%;
+  transform: translateX(-50%);
   opacity: 0.7;
 }
 
 .dirt {
   width: 60%;
+  max-width: 420px;
   height: 5%;
   background: #3a241d;
   position: absolute;
   border-radius: 0 0 1rem 1rem;
   bottom: 1%;
-	left: 20%;
+  left: 50%;
+  transform: translateX(-50%);
   opacity: 0.7;
   z-index: -1;
 }
@@ -91,7 +97,8 @@ h1 {
   background: #ddfbff;
   position: absolute;
   bottom: 20%;
-	left: 5%;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .jar-glossy-short {
@@ -101,5 +108,6 @@ h1 {
   background: #ddfbff;
   position: absolute;
   bottom: 45%;
-	left: 5%;
+  left: 50%;
+  transform: translateX(-50%);
 }