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: