Use divs to organize recipe pagesmain

Add #container, .title, .header, .content, and footer rules to styles.css

1 files changed, 33 insertions, 3 deletions

diff --git a/styles.css b/styles.css
index bcf77fb..7577b40 100644
--- a/styles.css
+++ b/styles.css
@@ -16,7 +16,7 @@
     --text-color: white;
     --border: 2px solid rgb(34, 34, 34);
     --arrows: url('arrow.png');
-    --img-size: 150px;
+    --img-size: 250px;
 }
 
 html,
@@ -32,13 +32,43 @@ body {
     background-attachment: fixed;
 }
 
-h3, p, ul, ol {
+#container,
+.topbar img {
+    max-width: 850px;
+    margin: 0 auto;
+}
+
+h1,
+.title {
+    margin: 50px;
+}
+
+h3,
+.header {
+    margin-top: 50px;
+}
+
+.content {
     background-color: var(--background);
+    border: var(--border);
+    margin: 40px;
+    padding: 10px;
+    width: 600px;
+    height: auto;
 }
 
 img {
-    width: 500px;
+    width: var(--img-size);
     height: auto;
+    margin-left: 175px;
+}
+
+footer {
+    border: var(--border);
+    height: 25px;
+    margin-top: var(--content-spacing);
+    background-color: var(--background);
+    text-align: center;
 }
 
 a {