fix: correct spacing in article paragraph text

src/App.css

@@ -18,89 +18,12 @@ body {
   background: #eee;
 }
 
-.welcome {
-  height: 100vh;
-  background: coral;
-}
-
-.welcome__text {
-  margin: 0;
-  font-size: 400%;
-  text-align: center;
-  line-height: 1;
-  padding-top: calc(50vh - 20pt);
-  display: block;
-  font-weight: 700;
-}
 
-.header {
-  width: 100%;
-  padding: 1em;
-  font-size: 140%;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  transition: opacity 0.2s ease-in-out;
-  text-align: center;
-}
-
-.header__title {
-  font-weight: 600;
-  display: inline;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-}
 
-.navigation__link {
-  display: inline-block;
-  outline: none;
-  text-decoration: none;
-  opacity: 0.7;
-  padding: 0 0.5em;
-  color: black;
-  transition: opacity 0.2s ease-in-out;
-}
 
-.navigation__link:hover,
-.navigation__link:focus {
-  opacity: 1;
-}
 
-.article {
-  margin: 5em auto 0;
-  padding: 1em;
-  font-size: 140%;
-  max-width: 800px;
-  background: white;
-  box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
-}
 
-.article__paragraph {
-  margin: 0;
-  color: #333;
-}
 
-.article__paragraph:not(:first-child) {
-  margin-top: 0.7em;
-}
 
-@media (min-width: 500px) {
-  .header {
-    text-align: left;
-    display: flex;
-    justify-content: space-between;
-  }
 
-  .article {
-    margin: 3.5em auto 0;
-    padding: 2em;
-  }
-}
 
-@media (min-width: 800px) {
-  .article {
-    margin: 3.5em auto;
-  }
-}

src/components/Article/Article.css

@@ -1 +1,33 @@
-/* Put article styles here */
+
+.article {
+  margin: 5em auto 0;
+  padding: 1em;
+  font-size: 140%;
+  max-width: 800px;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
+}
+
+.article__paragraph {
+  margin: 0;
+  color: #333;
+}
+
+.article__paragraph:not(:first-child) {
+  margin-top: 0.7em;
+}
+
+@media (min-width: 800px) {
+  .article {
+    margin: 3.5em auto;
+  }
+}
+
+@media (min-width: 500px) {
+    .article {
+        margin: 3.5em auto 0;
+        padding-left: 44.8px;
+        padding-right: 44.8px;
+        margin-bottom: 78.4px;
+    }
+}

src/components/Article/Article.jsx

@@ -1,5 +1,20 @@
 // import a css file containig article styles
+import "./Article.css" 
+
 
 // Create an Article function returning the HTML of article block
+const Article = () => {
+    return(
+        <div className="article">
+            <h2>Headline</h2>
+                <p className="article__paragraph">First paragraph with simple text.</p>
+                <p className="article__paragraph">Second paragraph continuing the idea.</p>
+                <p className="article__paragraph">Third paragraph adds more detail here.</p>
+                <p className="article__paragraph">Fourth paragraph for extra context.</p>
+                <p className="article__paragraph">Fifth paragraph concludes the section.</p>
+        </div>
+    );
+};
 
 // Add a default export statement for Article component to use it in the other files
+export default Article;

src/components/Header/Header.css

@@ -1 +1,43 @@
-/* Put header styles here */
+
+.header {
+  width: 100%;
+  padding: 1em;
+  font-size: 140%;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s ease-in-out;
+  text-align: center;
+}
+
+.header__title {
+  font-weight: 600;
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+@media (min-width: 500px) {
+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.navigation__link {
+  display: inline-block;
+  outline: none;
+  text-decoration: none;
+  opacity: 0.7;
+  padding: 0 0.5em;
+  color: black;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.navigation__link:hover,
+.navigation__link:focus {
+  opacity: 1;
+}

src/components/Header/Header.jsx

@@ -1,5 +1,16 @@
 // import a css file containig header styles
-
+import './Header.css'
 // Create a Header function returning the HTML of header block
+const Header = () =>{
+    return(
+        <div className='header'>
+            <h1 className='header__title'>Site Name</h1>
+            <a className='navigation__link' href='#about'>About</a>
+            <a className='navigation__link' href='#services'>Services</a>
+            <a className='navigation__link' href='#contact'>Contact</a>
+        </div>
+    );
+}
 
 // Add a default export statement for Header component to use it in the other files
+export default Header;

src/components/Welcome/Welcome.css

@@ -1 +1,15 @@
-/* Put welcome styles here */
+
+.welcome {
+  height: 100vh;
+  background: coral;
+}
+
+.welcome__text {
+  margin: 0;
+  font-size: 400%;
+  text-align: center;
+  line-height: 1;
+  padding-top: calc(50vh - 20pt);
+  display: block;
+  font-weight: 700;
+}

src/components/Welcome/Welcome.jsx

@@ -1,5 +1,14 @@
 // import a css file containig welcome styles
-
+import './Welcome.css'
 // Create a Welcome function returning the HTML of welcome block
 
+const Welcome = () => {
+    return(
+        <div className='welcome'>
+            <h1 className='welcome__text'>Sticky Header!</h1>
+        </div>
+    );
+}
+
 // Add a default export statement for Welcome component to use it in the other files
+export default Welcome;