Tribute Page - Build a Tribute Page

I’m stuck on the last step of " Your #image should be centered within its parent.". I think the parent of #image is #img-div but I’m not sure what I need to do to #img-div. Please let me know any suggestions to fix this.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
  <link href="styles.css" rel="stylesheet">
  </head>
<body>
  <header>
    <h1 id="title">Tim Burton</h1>
    <h2>American filmmaker and artist</h2>
  </header>
  <main id="main">
    <div id="img-div">
      <img src="https://images.saymedia-content.com/.image/c_limit%2Ccs_srgb%2Cq_auto:eco%2Cw_700/MTc0NDk0NjYyNDA3ODI1MDMw/frigtheningly-fun-facts-about-your-favorite-tim-burton-films.webp" alt="Tim Burton and characters in his films" id="image"></img>
      <figcaption id="img-caption">Tim Burton, middle, surrounded by characters from his many films.</figcaption>
    </div>
  <section id="tribute-info">
    <h3>A timeline of Burton's best films</h3>
    <ul>
    <li><strong>1988</strong> - Beetlejuice</li>  
    <li><strong>1990</strong> - Edward Scissor Hands</li>
    <li><strong>1993</strong> - The Nightmare Before Christmas</li>
    <li><strong>2005</strong> - Corpse Bride</li>
    <li><strong>2007</strong> - Sweeney Todd: The Demon Barber of Fleet Street</li>
    <li><strong>2012</strong> - Dark Shadows</li>
    </ul>
  <h3><a href="https://en.wikipedia.org/wiki/Tim_Burton" target="_blank" id="tribute-link">Click here</a> for more information on Tim Burton</h3>
  </section>
  </main>
</body>
</html>
/* file: styles.css */
html {
  background-color: rgb(46, 1, 131);
}

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

img {
  border-radius: 20px;
  border: solid 30px;
  
}

h1, h2 {
  text-align: center;
}

figcaption {
  text-align: center;
  font-style: italic;
  color: rgb(208, 214, 218);
}

h1 {
  font-family: Monotype Corsiva, Georgia; 
  color: rgb(242, 242, 35);
  font-size: 50px; 
}

h2 {
  font-family: Georgia, serif; 
  color: rgb(208, 214, 218);
}

p {
  font-family: Georgia, serif;
  color: rgb(208, 214, 218);
}

li {
  font-family: Georgia, serif;
  margin: 15px;
  color: rgb(208, 214, 218);
  font-size: 15px;

}

ul {
  background-color: rgba(140, 140, 237, 0.2);
  padding: 20px;
  border-radius: 25px;
  
}

h3 {
  color: rgb(208, 214, 218);
  text-align: center;
}

a {
  color: rgb(208, 214, 218);
}

a:hover {
  color: rgb(242, 242, 35);
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Since you are adding a border, that border may be messing up the centering.

Try adding box-sizing: border-box; to your #image selector

that’s exactly what it was! Thank you!!

1 Like