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>
  <link href="styles.css" rel="stylesheet">
    <h1 id="title">Tim Burton</h1>
    <h2>American filmmaker and artist</h2>
  <main id="main">
    <div id="img-div">
      <img src="" 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>
  <section id="tribute-info">
    <h3>A timeline of Burton's best films</h3>
    <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>
  <h3><a href="" target="_blank" id="tribute-link">Click here</a> for more information on Tim Burton</h3>
/* 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/ 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

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