User Story #9: The img element should be centered within its parent element

I can’t fix it, help me please.

If you can give a link to your code, it will help us in helping you properly

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<head> <div id="tile">Oriana Fallaci</div>
</head>
<body>
  <div id="main">
   <h1>Oriana Fallaci</h1>
  <h2> a free mind </h2>
  <div id="img-div">
    <image
  src=https://c1.staticflickr.com/8/7290/16357528879_de755785f4_b.jpg alt="Oriana Fallaci" class="center">
      <div id="Oriana Fallaci"></div>
      <p id="img-caption">Oriana Fallaci's photo</p>
      <p id="tribute-info">The relevance of Oriana Fallaci</p>
  <main> Oriana Fallaci was born in Italy in 1929, and she is one of the most famous journalist in the world, and a wonderful and powerful writer.
Here, a list of her most important books:
    <ol>
      <li>The Seven Sins of Hollywood</li>
      <li>The Useless Sex</li>
      <li>Penelope at Warm</li>
      <li>If the Sun Dies</li>
      <li>Nothing, and so be it</li>
      <li>Letter to a Child Never Born</li>
      <li>A man</li>
      <li>The Rage and the Pride</li>
      <li>The Force of Reason</li>
    </ol>
    Oriana Fallaci was fearless, surely not everyone has the same thoughts, but how can you deny her strenght?
    </main>
 
         </body>
         
         <a id="tribute-link" target="blank" href="https://en.wikipedia.org/wiki/Oriana_Fallaci">For more info click here</a>

this is html code

and this css

body {
  background-color: white
  text-align: center; }
h1{
  text-align: center; 
  font-family: Verdana;
  color: black;
}
h2 {
  text-align: center;
  font-family: Verdana;
  color:black;
}
main {
  text-align: left; 
  font-family: Arial;
  color: black;
}
p { text-align: center;
  font-family: Times; 
  color: red;
  
}
img{
  width: 100%
  height: auto;
  max-width: 500%;
  margin-left: 20px;
  margin-right: 20px;
  display: block;
  position: vertical; 
  
}
.center{
  display: block; 
 
}