i am stuck at the img element centered within its parent element.(tribute page)

Tell us what’s happening:
i am trying to complete the tribute page project .Even though i have completed all the given requirements but i am still getting this error i.e
The element should be centered within its parent element.

Your code so far
html

<style>
  body{
    background-color:white;
    color: black;
    font-family:calibri;
     
  }
</style>
<div id= "main">
  <h1 id="title"> Quaid e Azam -The founder of pakistan</h1>
  
  <div id="img-div">
    <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Muhammad_Ali_Jinnah">
       
    <img id ="image" src="https://www.samaa.tv/wp-content/uploads/2019/12/Nazar-e-Quaid-Isb-Pkg-25-121.jpg" alt="pic of QuaideAzam" width="20%" height="20%">
    </a>
    <figcaption id ="img-caption">Muhammad Ali Jinnah was a barrister, politician and the founder of Pakistan. Jinnah served as the leader of the All-India Muslim League from 1913 until Pakistan's independence on 14 August 1947, and then as Pakistan's first Governor-General until his death. He is revered in Pakistan as Quaid-i-Azam and Baba-i-Qaum. m</figcaption>
    
  </div>
  <p id="tribute-info">
    <b>Quaid-e-Azam and Two Nation Theory</b>
    <p>Quaid-e-Azam was a firm advocate of two nation theory which became the ideological basis of Pakistan. He said:
 “The Muslims are a nation by every right to establish their separate homeland. They can adopt any means to promote and protect their economic social, political and cultural interests.”</p>
    
  </p>
</div>

**CSS**
#img-caption{
  width:400px;
  
}
#image{
  display:block;
  height:auto;
  max-width:100%;
  
 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Your image isn’t centered though.

If you google how to center an image css then you will get the answer you are looking for pretty quickly.

Hope that helps!

I will search it . Thanks😊