Tell us what’s happening:
Describe your issue in detail here.
For all I can see, it looks like my code should be passing the final test, ie the image is centered, even when changing the width of the window. I don’t understand why it’s not being accepted, maybe someone could point out where I’m going wrong?
I know it’s not pretty, I wanted to get to that later
Your code so far
<!-- file: index.html -->
<DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device width, initial scale=1.0">
<meta name="description" content="freeCodeCamp certification project tribute page">
<title id="title">fCC project tribut page</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header>
<div id="header-div" class="header-div">
<h1>Professor Farnsworth</h1>
<p>Space Pilot 3000</p>
</div>
<nav>
<ul>
<ul <a href="#early-life">>Early Life</ul>
<ul <a href="#time-paradox">>Time Paradox</ul>
<ul <a href="#??????">>??????</ul>
</ul>
</nav>
</header>
<main id="main">
<figure class="img-div" id="img-div">
<img class="main-image" src="http://theinfosphere.org/images/a/a2/Farnsworth's_Reading_Glasses.jpg" alt="A picture of Professor Farnsworth with his reading glasses" id="image">
<figcaption id="img-caption">Professor Farnsworth with his reading Glasses</figcaption>
</figure>
<div id="early-life" class="early life">
<p>So what's this all about then eh?</p>
</div>
<div id="tribute-info" class="tribute-info">
<ul>
<li>2278 dsguidsfibn</li>
<li>2286 dsguidsfibn</li>
<li>2287 dsguidsfibn</li>
<li>2290 dsguidsfibn</li>
<li>2292 dsguidsfibn</li>
<li>2297 dsguidsfibn</li>
<li>2300 dsguidsfibn</li>
<li>2301 dsguidsfibn</li>
<li>2308 dsguidsfibn</li>
</ul>
<p>for more information, click <a id="tribute-link" href ="https://en.wikipedia.org/wiki/Professor_Farnsworth" target="_blank">here</p>
</div>
</main>
</body>
/* file: styles.css */
header{
width:90%;
max-width:1000px;
height:150px;
background-color:#D7C264;
display:flex;
justify-content:space-between;
margin-left:auto;
margin-right:auto;
}
.header-div {
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
}
main {
display:flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:center;
align-items:center;
}
.img-div {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:80%;
max-width:1000px;
}
.main-image {
display:block;
width:80%;
max-width:100%;
max-height:100%;
min-width:330px;
margin-left:auto;
margin-right:auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.63
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: