Tell us what’s happening:
I’m so close to finishing this project. The very last test is
“Your #image should be centered within its parent.”
I can’t figure out what I’m supposed to do. I’ve tried playing around with margin, text-align, and even grids, so I’m at a loss on what else to try.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Grumpy Cat</h1>
<h3>The Internet's Favorite Cat</h3>
<div id="img-div">
<img id="image" src="https://static01.nyt.com/images/2019/05/19/world/17grumpycat-1/17grumpycat-1-videoSixteenByNine1050.jpg"
alt="Grumpy Cat is resting her chin on a bright red pillow while glaring into the camera">
<div id="img-caption">
Grumpy Cat at the celebration of "Grumpy Cat's Worst Christmas Ever" in 2014
</div>
</img>
</div>
<section id="tribute-info">
<p>
Tardar Sauce or otherwise known as <b>"Grumpy Cat"</b> was born in 2012 and unfortunately passed away on May 14, 2019. Here are some things you may not know about her:
<p>
</section>
<section>
<ul id="content">
<li>
Her "grumpy face" is caused by a combination of feline dwarfism and an underbite.
</li>
<li>
Her favorite foods are tuna and Starbucks coffee cake
</li>
<li>
She has a brother, Pokey, who also has feline dwarfism
</li>
<li>
Her name and face have been trademarked in 2013
</li>
<li>
She had an estimated worth of at least $1 million
</li>
</u>
</section>
<h4>
To find more information on Grumpy Cat, visit her <a id="tribute-link" href="https://www.grumpycats.com/" target="_blank"> official website </a>
</main>
</body>
</html>
/* file: styles.css */
#main{
font-family: arial, sans-serif;
justify-content: center;
text-align: center;
background-color: #f5f0eb;
}
#img-div {
}
#img-caption {
text-align: center;
}
#image {
border-radius: 25px;
border: 12px solid white;
max-width: 100%;
height: auto;
display: block;
margin: auto 0;
text-align: center;
}
#tribute-info {
text-align: center;
}
#tribute-link {
}
#content {
text-align: center;
list-style-position: inside;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49
Challenge: Responsive Web Design Projects - Build a Tribute Page
Link to the challenge: