Tell us what’s happening:
The test I’m not passing says “Your #image should be centered within its parent”. My image appears centered on the page, and I’ve tried many ways to center it, but none are passing the test. Any help would be greatly appreciated.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dr. Seuss Tribute</title>
</head>
<body>
<main id="main">
<h1 id="title">Theodor Seuss Geisel</h1>
<p id="time-lived">1904-1991</p>
<div id="img-div">
<img id="image" src="https://cdn.britannica.com/69/133669-050-E1636D1B/Dr-Seuss-1957.jpg" alt="Theodor Seuss Geisel, mainly known as Dr. Seuss, sitting at his desk.">
<div id="img-caption">
<p>Theodor Seuss Geisel, known as Dr. Seuss, sitting at his desk.</p>
</div>
<section id="tribute-info">
<h2>The Life Story of Theodor Seuss Giesel</h2>
<ol id="life-story">
<li>Geisel was born on March 2, 1904, in Springfield, Massachusetts. His father was Theodor Robert Geisel, a successful brewmaster and his mother was Henrietta Seuss Geisel.</li><br>
<li>At age 18, Geisel left home to attend Dartmouth College, to get a major in English and writing. While there, he became an editor in-chief of the university's humor magazine. He would later get kicked out, after breaking a rule.</li><br>
<li>After graduating from Dartmouth, Geisel attended the University of Oxford in England, with plans to eventually become a professor. In 1927, he dropped out of Oxford. He also got married to his first wife, Helen, in that same year.</li><br>
<li>Upon returning to America, Geisel decided to pursue cartooning full-time. His articles and illustrations were published in numerous magazines, including <em>The Saturday Evening Post</em> and <em>Vanity Fair</em>. </li><br>
<li>Following WW2, Geisel and Helen purchased an old observation tower in California, where he would write for at least eight hours a day, and over the next five decades, he would write many books. Over the course of his career, he would publish more than 60 books, most of which are intended for children.</li><br>
<li>Some of his most famous works include: </li><br>
<div id="books">
<figure>
<img class="book-cover" src="https://m.media-amazon.com/images/I/71e4ln93HOL._AC_UF1000,1000_QL80_.jpg">
<figcaption>Green Eggs and Ham (1960)</figcaption>
</figure>
<figure>
<img class="book-cover" src="https://insight.randomhouse.com/fullpage.do?pContentType=JPG&pName=fullpage&pISBN=9780394823379&pPageID=6">
<figcaption>The Lorax (1971)</figcaption>
</figure>
<figure>
<img class="book-cover" src="https://m.media-amazon.com/images/I/616KiQJDjSL._AC_UF1000,1000_QL80_.jpg">
<figcaption>How The Grinch Stole Christmas! (1957)</figcaption>
</figure>
<figure>
<img class="book-cover" src="https://m.media-amazon.com/images/I/61n2olkhm8L._AC_UF1000,1000_QL80_.jpg">
<figcaption>The Cat in the Hat (1957)</figcaption>
</figure>
</div>
</ol>
<h4>Learn more about this American children's book author on his <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Dr._Seuss">Wikipedia page</a>.</h4>
</section>
</div>
</main>
</body>
</html>
/* file: styles.css */
#image {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
border: 3.5px solid navy;
}
#img-div {
padding: 10px;
margin: 0;
}
* {
font-family: 'Helvetica', sans-serif;
}
h1, h2, h4, p {
text-align: center;
}
h1 {
margin-bottom: 5.5px;
}
h1, h2 {
font-family: 'Courier New';
text-decoration: 1.7px navy underline;
}
#life-story {
list-style-type: "🔹";
}
figcaption {
font-weight: bold;
font-size: 10px;
}
.book-cover {
width: 100%;
max-width: 200px;
height: 270px;
object-fit: cover;
border-radius: 5px;
}
#books {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 15px;
}
li {
font-size: 19px;
}
h2 {
padding-bottom: 10px;
padding-top: 10px;
}
#time-lived {
margin: 0;
font-weight: bold;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Tribute Page - Build a Tribute Page
