Tribute Page - Build a Tribute Page | "Your #image should be centered within its parent"

Hello! The only error I get when running the tests on my code for this project is “Your #image should be centered within its parent,” but I thought I already did that. It’s centered on the preview too, so I’m not sure what I did wrong - maybe I missed something somewhere?

Code:

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Eartha Mae Kitt</h1>
        <h2>1927 - 2008</h2>
        <figure id="img-div"><img id="image" src="https://www.sis2sis.com/wp-content/uploads/2022/09/FHE-p4PVgAYUTi9-931x570.jpg" alt="Eartha Kitt and her daughter Kitt Shapiro, hugging and smiling."></img>
        <figcaption id="img-caption"><i>Eartha and her daughter, Kitt Shapiro.</i></figcaption><br>
       </figure>
      <section id="tribute-info"><p>
      Eartha Mae Kitt - born Eartha Keith - had a rough start, being rejected by those around her because of her mixed-race complextion. Luckily, she turned her tough beginnings into a long and successful life as a devoted singer, actress, and mother. She was outspoken and headstrong, being a strong advocate for women's rights and LGBTQ+ rights, while being vocally against the Vietnam War. Eartha's daughter, Kitt Shapiro, was there with her until the very end. "She left this world literally screaming at the top of her lungs," she said. "When she left, she left the world with a bang, she left it how she lived it."</section></p>
      <div class="source">All information obtained from <a href="https://en.wikipedia.org/wiki/Eartha_Kitt">Wikipedia.</a> For more, feel free to visit <a id="tribute-link" target="_blank" href="https://earthakitt.com/about/">Eartha Kitt's official website.</a></div>
   </main>
  </body> 
  </html>

/* file: styles.css */
* {
  background-color: rgb(232, 219, 228);
  font-family: Tahoma, Baskerville;
}

h1{
  margin-top: 1em;
  background-color: #C77A9250;
  padding: .5em;
}

p, h2 {
  background-color: #C77A9250;
}

body {
  text-align: center;
  margin: 0 20em;
}

#main {
  justify-content: center;
  background-color: #C77A9250;
}

#image {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: 1em;
}

.source {
  padding: 1em;
  background-color: #C77A9250;
  font-size: 11pt;
}

#tribute-info {
  background-color: #C77A9250;
  font-size: 13pt;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

The padding: 1em property appears to be throwing your image off-centre. If you remove it, your project passes.

1 Like

Got it! Thanks for the help : )

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.