adjust section border width

includes/nav.php

@@ -1,11 +1,13 @@
 <header id="top">
     <img src="../site-resources/assets/header-cat.svg" height="32px" width="32px">
-    <p>This cat rocks!</p>
-    <p>A homepage for my fine feline friend, Baxter</p>
-    <nav>
-        <a href="index.php">Home</a>
-        <a href="loveletter.php">Love you, Baxter</a>
-        <a href="behavior.php">Baxter's behaviors</a>
-        <a href="about.php">About this site</a>
-    </nav>
+    <span>
+        <p>This cat rocks!</p>
+        <p>A homepage for my fine feline friend, Baxter</p>
+        <nav>
+            <a href="index.php">Home</a>
+            <a href="loveletter.php">Love you, Baxter</a>
+            <a href="behavior.php">Baxter's behaviors</a>
+            <a href="about.php">About this site</a>
+        </nav>
+    </span>
 </header>

index.php

@@ -34,9 +34,9 @@
 
       </section>
     
-     <h3 class="facts-header">Baxter facts!</h3>
 
       <section class="baxter-info">
+        <h3 class="facts-header">Baxter facts!</h3>        
         <div class="baxter-is">  
           <p>Baxter is:</p>
             <ul>
@@ -75,9 +75,9 @@
           </div>
       </section>
     
-      <h3>My favorite photos of Baxter</h3>
       
       <section class="favorite-baxter-photos">
+        <h3>My favorite photos of Baxter</h3>        
         <figure>
             <img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">
 

style/style.css

@@ -1,3 +1,9 @@
+:root {
+	--section-color: #fccce4bb;
+	--border-color: #f6da92;
+	--header-color: #fc94bcbb;
+}
+
 *, *::before, *::after {
 	margin: 0;
 	padding: 0;
@@ -9,6 +15,8 @@ html {
 }
 
 body {
+	background-image: url("../site-resources/assets/bg.png");
+	background-attachment: fixed;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -20,7 +28,7 @@ main {
 	flex-direction: column;
 	align-items: center;
 	gap: 2rem;
-	width: 50rem;
+	width: 60vw;
 	height: auto;
 }
 
@@ -67,14 +75,21 @@ main {
 
 .favorite-baxter-photos {
 	display: grid;
-	grid-template-rows: 25rem 25rem;
+	grid-template-rows: 5rem 25rem 25rem;
 	grid-template-columns: 20rem 20rem;
+	gap: 1rem;
 	justify-items: center;
+	justify-content: center;
+}
+
+.favorite-baxter-photos h3 {
+	grid-row: 1/2;
+	grid-column: 1/3;
 }
 
 .favorite-baxter-photos figure {
-	height: 20rem;
-	width: 20rem;
+	height: 22.5rem;
+	width: 22.5rem;
 	text-wrap: wrap;
 	text-align: center;
 }
@@ -85,3 +100,31 @@ main {
 	object-fit: fill;
 }
 
+header {
+	width: 100%;
+	height: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	padding: 1rem;
+	background-color: var(--header-color);
+	border-bottom: 4px solid var(--border-color);
+}
+
+header img {
+	height: 48px;
+	width: auto;
+}
+
+section {
+	background-color: var(--section-color);
+	padding: 1.25rem;
+	border: 4px solid var(--border-color);
+	border-radius: 15px;
+	width: 60vw;
+}
+
+section img {
+	border-radius: 15px;
+}