Hi free code camp family. Pliz help, im stuck. It’s saying the img should be centered within its parent element. I did the following on the div parent element but its not working:
justify-content:center;
display:flex;
text-align:center;
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width-device-width, intial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Dr. Marvis Tsvangirai</h1>
<div id="img-div">
<img src="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg" id="image">
<p id="img-caption">Doctorate of Business Management & Entrepreneurship</p> </div>
<h2 id="tribute-info">Academic Qualifications</h2>
<p><strong>2006: </strong>Completed grade 7 @Masemo Primary school</p>
<p><strong>2010: </strong>Passed 8 'O'Level subjects @Gumunyu High School</p>
<p><strong> 2012:</strong> Passed 'A'Level subjects @Gumunyu High School</p>
<p><strong>2017:</strong>Graduated with Business Management & Entrepreneurship @Chinhoyi University of Technology</p>
<p><i>Marvis has always been passionate about education. She is currently studying a Masters degree in Digital Marketing @CPUT. She is working as a Digital Marketer for a logistics company in Cape Town.</i></p>
<p>Visit her <a id="tribute-link" href="www.linkedin.com/in/marvis-tsvangirai-271bb31ab" target="_blank">Linkedin profile</a></p>
</main>
</body>
</html>
/* file: styles.css */
#image{max-width:100%;
display:block;
}
#img-div{display:flex;
justify-content:center;
text-align:center;
max-width:100%;}
#img-caption{font-family:Verdana;display:block;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: