index.php

@@ -33,10 +33,9 @@
           </p>
 
       </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>
@@ -74,10 +73,9 @@
             </ul>
           </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

@@ -8,14 +8,13 @@ html {
 	font-size: 16px;
 }
 
-body {
+main {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
 
-main {
-	margin: 2rem 0 2rem 0;
+.welcome-section {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -24,19 +23,14 @@ main {
 	height: auto;
 }
 
-.welcome-section {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 2rem;
-}
-
 .baxter-info {
 	display: grid;
 	grid-template-rows: 1.5rem 1fr;
 	grid-template-columns: 1fr 1fr;
 	justify-items: center;
 	gap: 2rem;
+	width: 50rem;
+	height: auto;
 }
 
 .baxter-info p {
@@ -64,22 +58,3 @@ main {
 	grid-row: 2/3;
 	padding-left: 5rem;
 }
-
-.favorite-baxter-photos {
-	display: grid;
-	grid-template-rows: 25rem 25rem;
-	grid-template-columns: 20rem 20rem;
-	justify-items: center;
-}
-
-.favorite-baxter-photos figure {
-	height: 20rem;
-	width: 15rem;
-	text-wrap: wrap;
-}
-
-.favorite-baxter-photos img {
-	max-width: 100%;
-	max-height: 100%;
-	object-fit: fill;
-}