Update index.html

Signed-off-by: Blake Arnold <[email protected]>

Author: blake437

index.html

@@ -8,14 +8,7 @@
   padding: 0;
   min-height: 100vh;
 }
-.tabs-align-wrap {
-  max-width: 480px;
-  width: 100%;
-  margin: 32px auto 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
+
 .above-tabs {
   display: flex;
   justify-content: center;
@@ -25,24 +18,25 @@
   border-radius: 8px 8px 0 0;
   box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
   padding: 10px 24px 42px 24px;
+  margin: 32px auto 0 auto;
+  max-width: 480px;
   gap: 14px;
   position: relative;
   z-index: 1;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
 }
+
 #tabs {
   display: flex;
   justify-content: center;
+  margin: -32px 0 0 0;
   position: relative;
   z-index: 2;
+  max-width: 480px;
   width: 100%;
-  margin: 0;
-  left: 0;
-  transform: none;
-  box-sizing: border-box;
+  left: 50%;
+  transform: translateX(-50%);
 }
+
 .tab {
   background: #f7f7f7;
   border: 1px solid #bbb;
@@ -59,32 +53,47 @@
   color: #555;
   z-index: 2;
 }
+
 .tab.active {
   background: #fff;
   font-weight: bold;
   border-color: #888 #888 #fff #888;
   z-index: 3;
   color: #222;
 }
+
 .tab-content {
   display: none;
   border: 1px solid #ccc;
   border-radius: 0 0 8px 8px;
   background: #fff;
   padding: 28px 32px 24px 32px;
-  margin: 0;
-  width: 100%;
-  max-width: 100%;
+  margin: 0 auto 32px auto;
+  max-width: 480px;
   box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
   font-size: 15px;
-  box-sizing: border-box;
+  width: 100%;
 }
+
 .tab-content.active {
   display: block !important;
 }
+
 .tab:not(.active):hover {
   background: #ececec;
 }
+.tab-content {
+  display: none;
+  border: 1px solid #ccc;
+  border-radius: 0 0 8px 8px;
+  background: #fff;
+  padding: 28px 32px 24px 32px;
+  margin: 0 auto 32px auto;
+  max-width: 480px;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
+  font-size: 15px;
+}
+
 .above-tabs input[type="text"], 
 .above-tabs input[type="number"] {
   width: 180px;
@@ -239,9 +248,6 @@
   border-color: #d22;
 }
 @media (max-width: 600px) {
-  .tabs-align-wrap {
-    max-width: 98vw;
-  }
   .tab-content {
     padding: 16px 4vw;
     max-width: 98vw;