pages/about/index.module.css

@@ -16,11 +16,7 @@
   color: black;
 }
 
-.divs {
+.text > * {
-  margin-top: 4rem;
-}
-
-.divs > * {
   margin: 2rem auto;
   max-width: calc(806rem / 16);
 }
@@ -32,6 +28,8 @@
 } */
 
 .flexBox {
+  margin: 2rem auto;
+  max-width: calc(806rem / 16);
   position: relative;
   display: flex;
   flex-direction: row;

pages/about/index.tsx

@@ -1,5 +1,4 @@
-import React, { HTMLAttributes } from "react";
+import React from "react";
-import { MDXProvider } from "@mdx-js/react";
 import { Image } from "../../components/Image";
 import Content from "../../content/about/index.mdx";
 import styles from "./index.module.css";
@@ -8,7 +7,7 @@ import { SocialLinks } from "../../components/SocialLinks";
 
 export default function AboutUs() {
   return (
-    <DefaultLayout>
+    <div>
       <div className={styles.flexBoxTitle}>
         <h1 className={styles.title}>About Us!</h1>
       </div>
@@ -39,10 +38,10 @@ export default function AboutUs() {
           <Button>Subscribe</Button>
         </form>
       </div>
-    </DefaultLayout>
+    </div>
   );
 }
 
-function DefaultLayout(props: { children: React.ReactNode }) {
+AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
   return <div>{props.children}</div>;
-}
+};