Tell us what’s happening:
My css code so far:
html {
text-align: center;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
I’ve run the tests, and it didn’t pass the 16th, 17th and 19th test:
Failed: 16. Your img element should have a display of block.
Failed: 17. Your #image should have a max-width of 100%.
Passed: 18. Your #image should have a height of auto.
Failed: 19. Your #image should be centered within its parent.
However, I don’t see the problem. Could you help me please?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="page_styles.css">
<title>Tribute page</title>
</head>
<body>
<main id="main">
<h1 id="title">Wolfgang Amadeus Mozart</h1>
<figure id="img-div">
<img src="Mozart.jpg" alt="A photo of Mozart" id="image">
<figcaption id="img-caption">A detail of Mozart from the Portrait of the Mozart Family</figcaption>
</figure>
<section id="tribute-info">
<h3>Mozart's life</h3>
<ul>
<li>Born on january 27th 1756</li>
<li>
For more information, visit
<a href="https://en.wikipedia.org/wiki/Wolfgang_Amadeus_Mozart" target="_blank" id="tribute-link">
this page
</a>
</li>
</ul>
</section>
</main>
</body>
</html>
/* file: styles.css */
html {
text-align: center;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:144.0) Gecko/20100101 Firefox/144.0
Challenge Information:
Tribute Page - Build a Tribute Page