feat: make content pages like dc++ and contribute narrower

Author: Majestic9169

src/pages/Contribute.tsx

@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 
 const ContributePage = () => {
   return (
-    <div className="page-container">
+    <div className="content-page-container">
       <section className="contri-intro-section">
         <div className="contri-intro">
           <div className="contri-intro-container">

src/pages/DCPage.tsx

@@ -4,7 +4,7 @@ import TerminalDisplay from "../components/TerminalDisplay";
 
 function DCPage() {
   return (
-    <div className="page-container">
+    <div className="content-page-container">
       <section className="topic-section">
         <h2 className="section-header-left">Introducing DC++</h2>
         <p className="description">

src/styles/pages/App.css

@@ -44,7 +44,17 @@
 }
 
 .page-container {
-  margin: 50px 15%;
+  margin: 50px 20%;
+  /* width: 100%; */
+  text-align: left;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.content-page-container {
+  margin: 50px 30%;
   /* width: 100%; */
   text-align: left;
   display: flex;
@@ -99,4 +109,14 @@
   .page-container {
     margin: 10px 5%;
   }
+
+  .content-page-container {
+    margin: 10px 5%;
+  }
+}
+
+@media screen and (max-width: 1570px) {
+  .content-page-container {
+    margin: 15px 20%;
+  }
 }