Tell us what’s happening:
Your #image should be centered within its parent .
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tribute Page</title>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
<main id="main">
<h1 id="title">Tribute to my cat Bella</h1>
<div id="img-div"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" id="image"></img><figcaption id="img-caption">19 July 2022 to 26 march 2025</figcaption></div>
<p id="tribute-info">My cat Bella recently passed away. Experiencing my cat's death has been the hardest part about being a cat mom and also among the toughest and most emotional moments I've ever had to endure.
To me, my cats are not just cats... They are companions and my babies.
</p>
<p>Part of the way I process difficult emotions is through writing. That's why I've decided to share this tribute to Bella – both to honor her memory, and also to help myself navigate through this grief.
Additionally, I hope that by sharing my thoughts on writing my cat's obituary, I can provide some comfort and guidance to others who may be going through a similar experience of loss.
</p>
<a id="tribute-link" href="" target="_blank"></a>
</main>
</body>
</html>
/* file: styles.css */
img {display: block;
max-width: 100%;
height: auto;
justify-content: center;
align-items: center;
border: 5px solid gold;
margin: 0 auto;}
figcaption {text-align: center;
background: black;
color: gold;
border: solid 3px white;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build a Tribute Page - Build a Tribute Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-tribute-page/build-a-tribute-page
