components/Bubble.module.css

@@ -1,13 +1,11 @@
 .bubble {
   padding: calc(36rem / 16) 0;
   margin: calc(64rem / 16) 0;
-  background-color: #e1eefa;
-  /* width: 100% !important; */
+  background-color: var(--blue-1-20);
   max-width: 5000px !important;
-  /* border-radius: 20rem; */
 }
 
 .bubble > * {
   margin: 2rem auto;
-  max-width: calc(806rem / 16);
+  max-width: calc(800rem / 16);
 }

pages/about/index.module.css

@@ -10,6 +10,10 @@
   font-size: 24px;
 }
 
+.text {
+  background-color: white;
+}
+
 .text,
 .text li {
   font-size: 16px;
@@ -21,12 +25,6 @@
   max-width: calc(806rem / 16);
 }
 
-/*box-sizing: border box*/
-/* should not need this after component*/
-/* .bubble:nth-child(odd) {
-  background-color: #e1eefa;
-} */
-
 .flexBox {
   margin: 2rem auto;
   max-width: calc(806rem / 16);

pages/about/index.tsx

@@ -7,7 +7,7 @@ import { SocialLinks } from "../../components/SocialLinks";
 
 export default function AboutUs() {
   return (
-    <div>
+    <>
       <div className={styles.flexBoxTitle}>
         <h1 className={styles.title}>About Us!</h1>
       </div>
@@ -38,7 +38,7 @@ export default function AboutUs() {
           <Button>Subscribe</Button>
         </form>
       </div>
-    </div>
+    </>
   );
 }