Responsive Web Design Projects - Build a Tribute Page

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:

Well, I did not use div element for img-caption.
And I didn’t have so many props for image, that’s for sure. Tho I used some props for image just like you did.

Oh, and welcome to the forum of course)

Thank you so much for taking the time to reply, unfortunately, I haven’t figured out how to solve my problem yet.