Read more link display was fixed to stay properly aligned within the article grid layout

Author: russom

Wireframe/style.css

@@ -37,13 +37,24 @@ h2 {
 }
 h3 {
   font-size: 1.25em;
+  margin-top: 0;
+  margin-bottom: 0px;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
   padding-bottom: 5px; /* Make space for the fixed footer according to the wireframe requirements */
 }
+a {
+  padding: var(--space);
+  border: var(--line);
+  max-width: fit-content;
+}
 
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -57,6 +68,7 @@ footer {
   position: fixed;
   bottom: 0;
   left: 0;
+  padding: 10px;
   border-top: 1px solid black;
   text-align: center;
   width: 100%; /* Make the footer span the entire width of the viewport */
@@ -84,15 +96,15 @@ Keeping things orderly and separate is the key to good, simple CSS.
 */
 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;
     grid-template-rows: auto auto 1fr auto;
-    height: 100%;
+    overflow: hidden;
+    padding-bottom: 15px;
   }
   /* The below added lines fixed the image layout which was uneven*/
   > img {