Enhance CSS for sticky footer and layout adjustments

Author: huangwtings-hub

Wireframe/style.css

@@ -4,17 +4,29 @@
   left: -9999px;
 }
 
-/* General page styling */
+/* General page styling with flexbox for sticky footer */
+html, body {
+  height: 100%;
+}
+
 body {
   font-family: Arial, sans-serif;
   margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Make main content flexible to push footer down */
+main {
+  flex: 1;
   padding: 20px;
 }
 
 /* Center the page title */
 header {
   text-align: center;
-  margin-bottom: 20px;
+  padding: 20px 20px 0;
 }
 
 /* Layout for the articles */
@@ -43,10 +55,10 @@ article img {
   margin-bottom: 10px;
 }
 
-/* Center footer */
+/* Fixed footer to bottom of viewport */
 footer {
   text-align: center;
-  margin-top: 20px;
-  padding: 10px;
+  padding: 10px 20px;
+  border-top: 1px solid #ccc;
+  background-color: #f9f9f9;
 }
-