Não consigo centralizar minha <img> ao elemento pai

No Projeto: “Página de Tributo” , eu não estou conseguindo passar da execução da última validação. Alguém poderia me ajudar por favor?

HTML

<!DOCTYPE html>
<html lang="pt-br">
 <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FORTRAN: A primeira linguagem de programação</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <main id="main">
      <h1 id="title">
        John Backus
      </h1>
      <div id="img-div">
        <img id="image" src="https://ethw.org/w/images/5/57/Backus.jpg" alt="A imagem mostra o criador da primeira linguagem de programação, Fortran, John Backus."    />
        <div id="img-caption">A imagem mostrada contém o primeiro homem a criar a primeira linguagem de programação, que deu espaços para evoluir as linguagens que conhecemos hoje.</div>
        <p id="tribute-info">Nesta página, vamos falar um pouco sobre John Backus, sua tragetória e como foi criar a primeira linguagem.</p>
        <a id="tribute-link" href="https://ethw.org/John_Backus" target="_blank">Saber Mais</a>
      </div>
    </main>
  </body>
</html>
 
Style CSS
*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}
main{
  display:block;
}
#title{
  text-align: center;
}
img{
  display: block;
}
#img-div{
  display:block;
  text-align:center;
}
#image{
  max-width:100%;
  height:auto;
  margin-left:80px;
  margin-top:20px;  
}

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page

You can center the image by giving it a left and right auto margin.

You can also use the shorthand.

margin: 0 auto;
1 Like

Consegui! Muito obrigada, pela sua ajuda!

1 Like