Lo único que no me pasa es el ultimo requisito:
Tu #image debe estar centrado con respecto al elemento que lo contiene.
ADVERTENCIA
El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.
Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.
Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main id="main">
<nav id="encabezado">
<h1 id="title">PELÉ</h1>
<h2>El Rey del Futbol</h2>
</nav>
<div id="img-div">
<img src="https://www.realmadrid.com/img/cc_1280px/pele_20221229081905.jpg" id="image" alt="Pelé celebrando un gol con su pais Brazil"/>
<div id="img-caption">Pele celebrando un gol con su pais Brasil</div>
</div>
<div id="tribute-info">
<div id="nombre">
<h3>Nombre</h3>
<p>Edson Arantes do Nascimento</p>
</div>
<div id="nacimiento">
<h3>Nacimiento</h3>
<p> Tres Corações, Minas Gerais, Brasil 23 de octubre de 1940</p>
</div>
<div id="fallecimiento">
<h3>Fallecimiento</h3>
<p>São Paulo, Brasil 29 de diciembre de 2022</p>
</div>
<div>
<h2>Carrera Deportiva</h2>
<h3 class="h25">Club Profesional</h3>
</div>
<div id="debut">
<h3>Debut</h3>
<p>7 de septiembre de 1956 (Santos F. C.)</p>
</div>
<div id="dorsal">
<h3>Dorsal</h3>
<p>10</p>
</div>
<div>
<h3>Goles</h3>
<p>1156</p>
</div>
<div>
<h3>Retirada</h3>
<p>1 de octubre de 1977 (New York Cosmos)</p>
</div>
<div>
<h3 class="h25">Seleccion Nacional</h3>
</div>
<div>
<h3>Seleccion</h3>
<p>Brasil</p>
</div>
<div>
<h3>Debut</h3>
<p>7 de julio de 1957</p>
</div>
<div>
<h3>Goles</h3>
<p>92</p>
</div>
<div id="dorsal">
<h3>Dorsal</h3>
<p>10</p>
</div>
</div>
<footer>
<p>Más informacion en la <a id="tribute-link" target="_blank" href="https://es.wikipedia.org/wiki/Pelé">wiki</p>
</footer>
</main>
</body>
</html>
body{
background: rgb(255, 209, 0);
}
#encabezado{
background: rgb(0, 156, 85);
width: 100%;
min-width: 700px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0;
margin: 0;
font-family: 'Play', sans-serif;
}
#title{
font-size: 4rem;
margin: 0;
}
#image{
margin-top: 24px;
margin-bottom: 24px;
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 624px;
padding: auto;
border: 20px solid rgb(32, 25, 95);
align-items: center;
margin: auto;
}
#img-caption{
font-family: "Play", sans-serif;
text-align: center;
font-size: 32px;
}
#tribute-info, footer{
font-family: "Play", sans-serif;
}
#tribute-info div{
margin: 5px auto;
padding: 0 auto;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
#tribute-info{
text-align: left;
}
.h25{
font-size: 21px;
}
footer{
background-color: rgb(0, 156, 85);
padding: 10px;
text-align: center;
}
Desafío: Página del homenaje - Construye una página de homenaje
Enlaza al desafío: