footer fixed on bottom

Author: Giontr

Wireframe/index.html

@@ -21,7 +21,10 @@ <h2>What is a README file?</h2>
           A README is the front door of any software project — the first document a visitor reads when they encounter your code.
         </p>
         <p class="content">
-          Typically named README.md and written in Markdown, it lives at the root of a repository and renders automatically on platforms like GitHub. Its core purpose is to answer three questions immediately: what does this project do, how do I get it running, and how do I use it?<br>A well-crafted README... 
+          Typically named README.md and written in Markdown, it lives at the root
+          of a repository and renders automatically on platforms like GitHub. Its core
+          purpose is to answer three questions immediately: what does this project do,
+          how do I get it running, and how do I use it?<br>A well-crafted README...
         </p>
         <a href="https://en.wikipedia.org/wiki/README" target="_blank">Read more</a>
       </article>

Wireframe/style.css

@@ -1,7 +1,7 @@
 
 /* ====== Design Palette ======
  This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
+ It sets out the colours, fonts, styles etc to be used in this design
  At work, a designer will give these to you based on the corporate brand, but while you are learning
  You can design it yourself if you like
  Inspect the starter design with Devtools
@@ -40,7 +40,7 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
+/* ====== Site Layout ======
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
@@ -51,7 +51,10 @@ main {
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
   text-align: center;
+  padding-bottom: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -68,8 +71,8 @@ main {
     grid-column: span 2;
   }
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
+/* ====== 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.
 */
@@ -85,7 +88,7 @@ article {
   > img {
     grid-column: span 3;
   }
-  
+
   .intro {
     font-size: 1em;
     font-weight: bold;
@@ -96,9 +99,3 @@ article {
       opacity: 0.8;
     }
 }
-footer {
-  padding-bottom: var(--space);
-  position: relative;
-  bottom: 0;
-  width: 100%;
-}