Need help on my tribute website (SOLVED!)

UPDATE: I’ve figured out how to do this!

Tell us what’s happening:
Hi. I’ve built my website but it did not pass the test. I can only pass either one of these:

  1. The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
  2. The img element should be centered within its parent element.

So my score is always 9/10. I’m stuck and dont know how to fix the code.

Your code so far
HTML:

<header>
  <h1 id="title">Dato' Sri Siti Nurhaliza</h1>
  <p>Malaysia's Sweetheart</p>
  <figure id="img-div">
    <img id="image" src="https://cms.tontonextra.com.my/wp-content/uploads/2020/02/Dato-Siti-Nurhaliza-Featured.jpeg" alt="Siti Nurhaliza performed at the MTV Asia Aid concert in Bangkok in 2005.">
    <figcaption id="img-caption">Siti Nurhaliza on the night of 2019 Anugerah Juara Lagu 34 (#AJL34)</figcaption>
  </figure>
</header>

CSS:

#img-div {
  text-align: center;
}

#img-div img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

Your browser information:
Chrome

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

UPDATE: I’ve figured out how to do this!

Congratulations and thanks for letting us know!
(If you post this as a comment, you can mark the topic as solved, which will be visible next to the title …)