css alterations

Author: JohnRob-jnr

Wireframe/index.html

@@ -12,15 +12,15 @@ <h1>Web Development & Planning</h1>
       <p>Here are some useful steps & information to help you get started with web development.</p>
     </div>
       <main>
-      <div class="top-article">
+      <article>
          <img src="wireframe.png" alt="wireframe" />
       <h1>Wireframe</h1>
       <p>
         What is the purpose of a wireframe? Think of "Wireframe" as the  Architectural blueprint of a website or App.
         A visual guide that outlines the structure, layout and placement of elements on a website. 
       </p>
-      </div>
-      <div class="left-article">
+      </article>
+      <section>
         <img src="placeholder.svg" alt="" />
         <h2>README File</h2>
         <p>
@@ -29,7 +29,7 @@ <h2>README File</h2>
         </p>
         <a href="">Read more</a>
       </div>
-      <div class="right-article">
+      <section>
         <img src="placeholder.svg" alt="" />
         <h2>Branch in Git</h2>
         <p>

Wireframe/style.css

@@ -22,15 +22,17 @@ As well as useful links to learn more */
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
-  --container: 1280px;
+  --container: 900px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
-  text-align: center;
+  width: 66.666%;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 a {
@@ -75,35 +77,21 @@ main {
   text-align: center;
 }
 
-.top-article {
+.article {
   border: var(--line);
   padding: var(--space);
   text-align: center;
-  width: 80%;
 }
 
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
-.left-article {
-  border: var(--line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
-
-  .right-article {
+section {
   border: var(--line);
   padding-bottom: var(--space);
-  text-align: right;
+  
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {