Im currently having the new responsive web design and sumbiting the 2nd project.
i get those 3 errors:
Your img element should have a display of block
Your #image should have a max-width of 100%
Your #image should be centered within its parent
my html:
<!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="fcc.css">
<title>Document</title>
</head>
<body>
<main id="main">
<header class="header">
<h1 id="title">ALBERT EINSTEIN</h1>
<label>A tribute for Albert Einstein</label>
</header>
<div id="img-div">
<img id="image" src="https://www.history.com/.image/ar_16:9%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cg_faces:center%2Cq_auto:good%2Cw_768/MTU3OTIzNTc5MDY5MDE1Njk4/albert-einstein039s-travel-diaries-reveal-racist-commentss-featured-photo.jpg">
<div for="image" id="img-caption">Albert Einstein studying in a library.</div>
</div>
<div id="tribute-info">
<p>Einstein was born in the German Empire, but moved to Switzerland in 1895, forsaking his German citizenship (as a subject of the Kingdom of Württemberg)[note 1] the following year. In 1897, at the age of 17, he enrolled in the mathematics and physics teaching diploma program at the Swiss Federal polytechnic school in Zürich, graduating in 1900. In 1901, he acquired Swiss citizenship, which he kept for the rest of his life, and in 1903 he secured a permanent position at the Swiss Patent Office in Bern. In 1905, he was awarded a PhD by the University of Zurich. In 1914, Einstein moved to Berlin in order to join the Prussian Academy of Sciences and the Humboldt University of Berlin. </p>
</div>
<p>See the wikipedia article of Albert Einstein <a id="tribute-link" href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">here</a></p>
</main>
</body>
</html>
my css:
* {
/*padding: 0;
margin: 0;*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, Courier, monospace;
}
main{
text-align: center;
background-color:rgb(241, 241, 241);
border-radius: 15px;
margin: auto;
border: 2px solid rgb(85, 85, 85);
}
#image{
height:auto;
max-width: 100%;
max-height: 80%;
border-radius: 5px;
box-shadow: 5px 5px 30px 10px rgba(0, 0, 0, 0.731);
margin: auto;
display: block;
}
.header{
padding: 5px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, Courier, monospace;
}
a{
color: black;
}
#img-div{
background-color: white;
padding-top: 35px;
border-radius: 10px;
margin: 20px;
padding-bottom: 5px;
}
#tribute-info {
text-align: center;
margin: auto;
padding: 10px 20px;
}
#img-caption{
margin: 10px auto;
padding: 10px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Challenge: Build a Tribute Page
Link to the challenge: