Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

“center #image within its parent” remains unchecked.
However, #image is centered within its parent.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <main id="main">
    <head>
  <link rel="stylesheet" href="styles.css">
  <title>Rick Riordan</title>
</head>
<body>
    <h1 id="title">Rick Riordan</h1>
    <div id="img-div">
      <img id="image" src="https://imgs.search.brave.com/N4Frf-sYvlRVj2FEtkjcdufXNlnm1UtatGfIj20Zi8w/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/cmlja3Jpb3JkYW4u/Y29tL3dwLWNvbnRl/bnQvdXBsb2Fkcy8y/MDIwLzEwLzExMjI0/NzA4L3JpY2suanBn">
      <figcaption id="img-caption">I didn't think Rick Riordan looked like that.</figcaption>
    </div>
<p class="indent">Born in 1984, Rick Riordan was a great book writer. He writes books that teaches you about greek mythology, wich are very fun to read about. I am reading one of them called "Percy Jackson".</p>

<p class="indent">The Percy Jackson series, made up of five books, follows the adventures of demi-god Percy Jackson and his friends as they go on quests to save the world from monsters and gods. Praised for its unique blend of mythology, adventure, and humor, the series has gave fame to Riordan.</p>

<p class="indent">In addition to Percy Jackson, Riordan has written several other successful series and standalone novels. His impact on young adult literature is inspiring. Tons of readers tend to love exploring the world of Riordan's books.</p>

<p class="indent">Rick Riordan is a great writer who's made a big impact. He's shown how powerful stories can be.</p>
    <h4 id="tribute-info">I love Rick Riordan's books. Maybe you should try reading them, too!</h4>
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Rick_Riordan" target="_blank">Learn more about Rick Riordan!</a>
    </body>
  </main>
</html>


/* file: styles.css */
* {
   background-color: skyblue;
}

h1 {
  text-align: center
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
  border: solid blue 5px;
}


p {
  padding-left: 1em;
  padding-right: 1em;
}
a {
  padding-left: 5em;
}
.indent {
  text-indent: 20px;
}
figcaption {
  font-weight: bold;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Div is the parent element to your image. You haven’t centered the image within that.

Look at centering with flexbox to help you:

How To Center An Image In CSS / HTML? | Elementor.