Refactor code structure for improved readability

Author: JohnRob-jnr

Wireframe/index.html

@@ -12,18 +12,18 @@ <h1>Web Development & Planning</h1>
       <p>Here are some useful steps & information to help you get started with web development.</p>
     </header>
       <main>
-      <article>
+      <section>
          <img src="../Wireframe/img/Wireframe1.png" alt="wireframe" />
       <h2>Wireframe</h2>
       <p>
-        What is the purpose of a wireframe? Think of "Wireframe" as the  Architectural blueprint of a website or App.
+        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>
       <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
-      </article>
+      </section>
       <section>
         <img src="./img/readmeimg.png" alt="README File" />
-        <h3>README File</h3>
+        <h2>README File</h2>
         <p>
           What is the purpose of a README file? It serves as the introductory guide and instruction manual for a project,
           explaining what the software does, how to install and run it, and how others can contribute to it.
@@ -32,14 +32,14 @@ <h3>README File</h3>
       </section>
       <section>
         <img src="./img/Gitbranch1.jpg" alt="Git Branch" />
-        <h3>Branch in Git</h3>
+        <h2>Branch in Git</h2>
         <p>
-          What is a branch in Git? A branch in Git is a seperate line of development that allows you to isolate your work,
+          What is a branch in Git? A branch in Git is a separate line of development that allows you to isolate your work,
           experiment with new features, fix bugs or make changes without affecting the main codebase.
         </p>
         <a href="https://github.com/gitstandards/git-branching">Read more</a>
       </section>
-    </main>
+      </main>
     <footer>
       <p>
         Created By John Robinson. 2026

Wireframe/style.css

@@ -51,14 +51,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 2rem;
   width: 70%;
   text-align: center;
 }
 
 footer {
+  position: fixed;
+  bottom: 0;
   text-align: center;
   margin: 0 auto;
-  padding: 2rem 0;
+  padding: 0.5rem 0;
   background-color: white;
   width: 100%;
   border-top: var(--line);