Creating a margin css class

src/App.css

@@ -12,6 +12,10 @@ body {
     margin: 0 auto
 }
 
+.m-5-auto {
+    margin: 5rem auto
+}
+
 /***    Landing Page     ***/
 .main-title,
 .main-para {
@@ -70,10 +74,6 @@ body {
 }
 
 /***    Login Page     ***/
-.login-page {
-    margin: 5rem auto
-}
-
 h2 {
     font-weight: 300
 }

src/components/pages/LoginPage.js

@@ -9,7 +9,7 @@ const handleClick = () => {
 
 export default function SignInPage() {
     return (
-        <div className="text-center login-page">
+        <div className="text-center m-5-auto">
             <h2>Sign in to us</h2>
             <form action="/home">
                 <p>

src/components/pages/RegisterPage.js

@@ -6,7 +6,7 @@ import '../../App.css'
 export default function SignUpPage() {
 
     return (
-        <div className="text-center login-page">
+        <div className="text-center m-5-auto">
             <h2>Join us</h2>
             <h3>Create your personal account</h3>
             <form action="/home">