The footer is placed in the center of the bottom.

The picture has changed differently.

Author: Arthur

Wireframe/git-branches.png

@@ -20,14 +20,14 @@ <h2>Featured Article</h2>
         <img
           src="https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbqwje91mhujxu2gk5p83.jpg"
           alt="readme">
-        <h3> What is the purpose of a README file? </h3>
+        <h2> What is the purpose of a README file? </h2>
         <p>
           A README file is a markdown document that provides an introduction and documentation for a project hosted on
           GitHub. It is usually placed in the root directory of a repository and is automatically displayed on the
           repository’s main page.
         </p>
 
-        <h4>Other Purposes of a README File</h4>
+        <h3>Other Purposes of a README File</h3>
         <ul>
           <li>Provides an overview of the project</li>
           <li>Describes installation and setup </li>
@@ -56,7 +56,7 @@ <h2>What is the purpose of a wireframe?</h2>
     </article>
 
     <article class="side-card">
-      <img src="https://images.surferseo.art/5f496a4a-799c-4502-8e9e-2f396dae9c91.png" alt="Branch in Git">
+      <img src="git-branches.png" alt="Branch in Git">
       <h2>What is a branch in Git?</h2>
       <p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting
         the main project. Think of it as a " parallel universe " for your code. </p>

Wireframe/index.html

@@ -1,11 +1,11 @@
-.page-header{
-display:flex;
-flex-direction:column;
-align-items: center;
-justify-content: center;
-text-align: center;
-min-height: 300px;
-background-color: #f4f4f4;  
+.page-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 300px;
+  background-color: #f4f4f4;
 }
 
 .page-header h1 {
@@ -26,11 +26,13 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
@@ -41,58 +43,57 @@ svg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  
+
   max-width: var(--container);
-   
+
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 
-.main-wrapper > *:first-child {
+.main-wrapper>*:first-child {
   grid-column: span 2;
 }
 
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
   text-align: center;
 }
 
 
 article {
   border: var(--line);
   padding-bottom: var(--space);
- display: flex;
- flex-direction: column;
-  
-  height: 100%;
-  
+  display: flex;
+  flex-direction: column;
   padding: 0 var(--space) var(--space) var(--space);
-  
-  overflow:hidden;
+  overflow: hidden;
 }
 
-article img{
-  width: calc(100% + (var(--space) *2));
-  margin-left: calc(var(--space)* -1);
+article img {
+  width: 100%;
   height: 250px;
   object-fit: cover;
-  margin-bottom: var(--space);
+  display: block;
+  flex-shrink: 0;
 }
 
 article h2 {
-  min-height: 5em; 
+  height: 4.0em;
   display: flex;
-  align-items: center; /* Vertically centers the text if it's only one line */
+  align-items: flex-start;
   margin-top: 0;
   margin-bottom: var(--space);
 }
 
-article p{
+article p {
   flex-grow: 1;
   margin-bottom: var(--space);
 }
 
-article a{
+article a {
   margin-top: auto;
   align-self: flex-start;
-}
+}