diff --git a/index.html b/index.html
index f92f12a..b8dc440 100644
--- a/index.html
+++ b/index.html
@@ -15,33 +15,36 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <div class="container center">
-      <div class="card">
-        <div class="image center">
-          <img
-            src="/images/illustration-article.svg"
-            alt="Article illustration"
-          />
-        </div>
-
-        <div class="content">
-          <p class="learning">Learning</p>
-
-          <p class="date">Published 21 Dec 2023</p>
-
-          <h1>HTML & CSS foundations</h1>
-
-          <p class="description">
-            These languages are the backbone of every website, defining
-            structure, content, and presentation.
-          </p>
-        </div>
-
-        <footer>
-          <img width="32px" height="32px" src="/images/image-avatar.webp" alt="Author avatar">
-          <p>Greg Hooper</p>
-        </footer>
+    <main class="card">
+      <div class="image-container">
+        <img
+          src="/images/illustration-article.svg"
+          alt="Article illustration"
+        />
       </div>
-    </div>
+
+      <div class="content">
+        <p class="learning">Learning</p>
+
+        <p class="date">Published 21 Dec 2023</p>
+
+        <h1 class="heading">HTML & CSS foundations</h1>
+
+        <p class="description">
+          These languages are the backbone of every website, defining structure,
+          content, and presentation.
+        </p>
+      </div>
+
+      <div class="author">
+        <img
+          width="32px"
+          height="32px"
+          src="/images/image-avatar.webp"
+          alt="Greg Hooper"
+        />
+        <p>Greg Hooper</p>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/styles.css b/styles.css
index c2b8e66..54f665f 100644
--- a/styles.css
+++ b/styles.css
@@ -14,23 +14,20 @@
   margin: 0;
 }
 
-img,
-picture,
-video,
-canvas,
-svg {
+img {
   display: block;
   max-width: 100%;
 }
 
 body {
-  background-color: #f4d04e;
-  font-family: "Figtree";
-}
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-.container {
+  background-color: #f4d04e;
   padding: 24px;
   min-height: 100dvh;
+  font-family: "Figtree";
 }
 
 .card {
@@ -46,86 +43,84 @@ body {
 
   padding: 24px;
   max-width: 24rem;
-
-  .image {
-    border-radius: 10px;
-    overflow: hidden;
-
-    img {
-      height: 200px;
-      object-fit: cover;
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .learning {
-      border-radius: 4px;
-      background-color: #f4d04e;
-      padding: 4px 12px;
-      width: fit-content;
-
-      font-weight: 800;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-
-    .date {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-
-    h1 {
-      font-weight: 800;
-      font-size: 24px;
-      line-height: 1.5;
-    }
-
-    .description {
-      color: #7f7f7f;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 1.5;
-    }
-
-    @media screen and (max-width: 576px) {
-      .learning {
-        font-size: 12px;
-      }
-
-      .date {
-        font-size: 12px;
-      }
-
-      & h1 {
-        font-size: 20px;
-      }
-
-      .description {
-        font-size: 14px;
-      }
-    }
-  }
-
-  footer {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    p {
-      font-weight: 800;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-  }
 }
 
-.center {
+.image-container {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  border-radius: 10px;
+  overflow: hidden;
+
+  img {
+    height: 200px;
+    object-fit: cover;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.learning {
+  border-radius: 4px;
+  background-color: #f4d04e;
+  padding: 4px 12px;
+  width: fit-content;
+
+  font-weight: 800;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.date {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.heading {
+  font-weight: 800;
+  font-size: 24px;
+  line-height: 1.5;
+}
+
+.description {
+  color: #7f7f7f;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+@media (max-width: 576px) {
+  .learning {
+    font-size: 12px;
+  }
+
+  .date {
+    font-size: 12px;
+  }
+
+  & h1 {
+    font-size: 20px;
+  }
+
+  .description {
+    font-size: 14px;
+  }
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  p {
+    font-weight: 800;
+    font-size: 14px;
+    line-height: 1.5;
+  }
 }
