style: modify text width

Author: francelu

website/index.html

@@ -29,8 +29,11 @@
   <div id="website">
 
     <!-- Each .section becomes a full-screen panel -->
-    <div class="section" data-anchor="introduction" style="--bg-img: url('data/intro_background.jpg')">
+    <div class="section" data-anchor="title" style="--bg-img: url('data/intro_background.jpg')">
       <h1>Olympic Inequalities</h1>
+    </div>
+
+    <div class="section" data-anchor="introduction">
       <h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
       <p>
         At first glance, the Olympics look like so-called fair Games: the best atheletes compete, and the best win.
@@ -44,6 +47,7 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
         Scroll through the story to see how social, political, and economic contexts have shaped
         the Games over time.
       </p>
+
     </div>
 
     <div class="section" data-anchor="gender">

website/styles.css

@@ -119,52 +119,60 @@ p {
 }
 
 h1,
-h2,
-h3 {
+h2 {
   font-family: "Carter One", sans-serif;
   text-align: center;
-  margin: 0;
 }
 
 h1 {
   font-size: 60px;
-  padding-bottom: 24px;
 }
 
 h2 {
   font-size: 40px;
-  padding-bottom: 24px;
-}
-
-h3 {
-  font-size: 30px;
-  text-align: left;
+  padding-bottom: 32px;
+  margin: 0 auto;
+  width: 80%;
 }
 
 p {
   text-align: justify;
   padding-bottom: 6px;
+  margin: 0 auto;
+  width: 60%;
 }
 
 /* =============================================
-   Introduction section
+   Title section
    =========================================== */
 
-.section[data-anchor="introduction"] {
+.section[data-anchor="title"] {
   box-sizing: border-box;
   background-attachment: fixed;
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+}
+
+/* =============================================
+   Introduction section
+   =========================================== */
+
+.section[data-anchor="introduction"] {
   display: flex;
   flex-direction: column;
 }
+/* 
+[data-anchor="introduction"] h2 {
+  margin: 0 auto;
+  width: 80%;
+}
 
 [data-anchor="introduction"] p {
   margin: 0 auto;
   width: 60%;
-}
+} */
 
 /* =============================================
    Gender section