My #image should be centered within its parent? cant seem to pass or not working

ive tried so many times and so many different ways for it to work but i still cant figure it out. its kind of a mess but please help me. everything ive seen says to put margin: 0 auto in the img style code, but that isnt working. this is what ive got for that part.

html:


<main id="main">
  <head><link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Nosifer&family=Oswald&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <h1 id="title"> H.P Lovecraft</h1>
  <p><strong>unrecognised in his own life time</strong></p>
    <figure id="img-div">
          <div><img id="image" src="https://pbs.twimg.com/profile_images/1507422762784145447/HmNIgtE8_400x400.jpg"
                    alt="Fan art of H.P Lovecraft designed with his own horror monsters such as cthulhu."/></div>
   <figcaption id=img-caption>
     H.P lovecraft surround by his demons and monsters he had wrote about, such as Cthulhu (Elder-god)
      </figcaption>
  </figure>
<section id="tribute-info">
  <h2 id="headline"> Timeline of H.P Lovecraft</h2>
    <ul>
      <li><strong>1890</strong>-on Aug 20th Howard Philips Lovecraft was born</li>
      <li><strong>1911-1914</strong>-Lovecraft starts a series of critical letters to magazine authors that eventually earns him the notice of the editor who gives him a job.</li>
      <li><strong>1912</strong>-First Non-Self Published Poem, "Providence in 2000 A.D."</li>
      <li><strong>1923</strong>-most of Lovecraft’s short stories appeared in the magazine Weird Tales.</li>
      <li><strong>1924</strong>-Lovecraft Marries Sonia Greene and moves to New York.</li>
      <li><strong>1925-1926</strong>-Begins the Draft of the "Call of Cthulhu"
      <li><strong>1927</strong>- The Case of Charles Dexter Ward was written (But was published posthumously in 1941).
      <li><strong>1928</strong>- His best novel known to this day "Call Of Cthulhu" was published.
      <li><strong>1936</strong>- "At the Mountains of Madness" and "The Shadow over Innsmouth" was published
      <li><strong>1937</strong>- H.P Lovecraft Dies.
  </ul>
  </section>
  <blockquote
              
           cite=https://www.britannica.com/biography/H-P-Lovecraft>
    <p id="fact">Lovecraft was interested in science from childhood, but lifelong poor health prevented him from attending college. He made his living as a ghostwriter and rewrite man and spent most of his life in seclusion and poverty. His fame as a writer increased after his death.</p>
    <h3> To learn more about H.P Lovecraft and his life on his
      <a
         id="tribute-link"
         
         href="https://en.wikipedia.org/wiki/H._P._Lovecraft"
         target="_blank"
         >wiki entry </a
        >.
    </h3>
    </main>

css:

html {
  font-size: 15px;
    color: green;
}
body {
  margin: 0 auto;
  background-color: black;
  text-align: center;

}

h1 {
 text-align: center;
  font-size: 50px;
  font-family: 'Nosifer', monospace;
  border-width: 30px;
  border-style: groove;
  border-radius: 100px;
  border-color: green;
  margin: 0;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
  border: solid;
  border-width: 5px;
  border-color: rgb(77, 72, 18);
}
#img-div{
  background-color: rgb(20, 38, 25);
  text-align: center;
  margin: 0 auto;
  border: dashed;
  border-width: 10px;
  border-color: rgb(47, 51, 20);
}
p{
  text-align: center;
  font-size: 25px;
}

#img-caption{
  text-align: center;
  font-size: 20px;
  font-family: fantasy;
}
h2{
  border: solid;
}
ul {
  max-width: 700px;
  margin: 0 auto 50px auto;
    text-align: left;
  font-size: 20px;
  border: dashed;
  line-height: 1.8;
}

#fact{
  text-align: center;
  max-width: 100%;
}

and again sorry if it looks like a big mess. if anyone wants to see what it looks like aswell here is my codepen link to the tribute page.

Did you get it?
I copied the code you sent, and in both the code and your codepen the image seems to indeed be centered.