After creating code, I’m still receiving these errors when testing the code. Please help!
Failed:16. Your img element should have a display of block.
Failed:17. Your #image should have a max-width of 100%.
Failed:19. Your #image should be centered within its parent.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
<main id="main">
<h1 id="title" class="main-header">Harriet Chalmers Adams</h1>
<p class="sub-header-1"><h2>Mrs. Marco Polo of the Americas</h2></p>
<p class="sub-header-2"><h3><em>An American explorer, journalist and photographer</em></h3></p>
<figure id="img-div">
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/6/62/Harriet_Chalmers_Adams_in_the_Gobi_desert.jpg"
alt="A black and white picture of Harriet Chalmers Adams wearing a long coat and knit hat, clutching a bag, standing next to and admiring a pair of bridled, hitched camels in the Gobi desert."/>
<figcaption id="img-caption" class="img-caption">Harriet Chalmers Adams in the Gobi desert.
</figcaption>
</figure>
<section id="tribute-info" class="timeline-header">
<h4 id="headline">
<strong>Timeline of Harriet Chalmers Adams' life:</strong>
</h4>
<ul class="timeline">
<li>
<h5><strong>1875:</strong> Born October 22 in Stockton, California</h5>
</li>
<li>
<h5><strong>1883:</strong> Traveled by horseback with her father through the Sierra Nevada</h5>
</li>
<li>
<h5><strong>1886:</strong> Swam 500 meters in Santa Cruz, California without resting, impressing a local reporter</h5>
</li>
<li>
<h5><strong>1886:</strong> Stopped formal education to take lessons from her father and tutors, eventually becoming fluent in Spanish, and competent in German, French, Italian and Portuguese</h5>
</li>
<li>
<h5><strong>1899:</strong> Married Franklin Pierce Adams</h5>
</li>
<li>
<h5><strong>1900:</strong> Developed a desire for international travel after a short visit to Mexico with her husband</h5>
</li>
<li>
<h5><strong>1900-1903:</strong> First major expedition with her husband, visiting every country in South America, covering 40,000 miles on horseback, foot, canoe and train</h5>
</li>
<li>
<h5><strong>1907:</strong> Presented 3,000 photographs taken over her journey to Gilbert Grosvenor, the head of the National Geographic Society, resulting in her first byline that led to 20 more throughout her lifetime, launched her career as a contributor to the National Geographic Society</h5>
</li>
<li>
<h5><strong>1917:</strong> First female journalist invited and allowed in the trenches of the French frontline in World War 1, where very few journalists of either gender were permitted</h5>
</li>
<li>
<h5><strong>1925:</strong> Helped launch the Society of Women Geographers, and became their president</h5>
</li>
<li>
<h5><strong>1930:</strong> Set sail for Gibralter, then on to Spain, France, Egypt, Ethiopia (then Abyssinia), French and Italian Somaliland, Iraq, and the Anglo-Egyptian Sudan to meet Haile Selassie and see their coronation as the new emporer of Ethiopia</h5>
</li>
<li>
<h5><strong>1933:</strong> Moved to France after cultivating a membership for the Society of Woman Geographers that spanned 39 countries</h5>
</li>
<li>
<h5><strong>1937:</strong> Chalmers died July 17 at 61 and her husband shipped two of her sacred posessions, a clay urn, and a tablecloth, to life-long friend, Gilbert Grosvenor, the editor of
<em>National Geographic</em>
</h5>
</li>
</ul>
<block-quote cite="https://www.adventure-journal.com/2016/01/harriet-chalmers-adams-the-original-adventure-lebrity/">
<p>"She logged over 100,000 miles - the equivalent of four times around the world - all before you could purchase a trans-Atlantic commercial airline ticket."</p>
</block-quote>
<figcaption class="quote-author">- Brook Sutton,
<cite class="quote-source">Harriet Chalmers Adams: The Original Adventure-lebrity</cite>
</figcaption>
<h4 class="learn-more">
Interested in learning more about Harriet Chalmers Adams? Check out
<a
id="tribute-link" href="http://scholarworks.csun.edu/bitstream/handle/10211.2/2790/CAgeographer2009_p51-70.pdf?sequence=1"
target="_blank">this amazing article written by Kathryn Davis from <em>San Jose State University</em>.
</h4>
<cite class="resources">
<h6><strong>Resources:</strong></h6>
<ol>
<h6>
<li>Nina Strochlic. March 16, 2020.
<a href="https://www.nationalgeographic.com/history/2020/03/40000-mile-journey-was-nothing-for-19th-century-female-explorer/#close"
target="_blank">
<em>A 40,000-mile journey was nothing for this 19th-century female explorer.</em> National Geographic.
</li>
</h6>
<h6>
<li>Brook Sutton. January 28, 2016.
<a href="https://www.adventure-journal.com/2016/01/harriet-chalmers-adams-the-original-adventure-lebrity/"
target="_blank">
<em>Historical Badass Archives. Harriet Chalmers Adams: The Original Adventure-lebrity.</em> Adventure Journal.
</li>
</h6>
</ol>
</cite>
</section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
i noticed you were missing the html boilerplate like the head tag and the link for the stylesheet. Usually these are at the top.
Put your code through an online html validator like the one below to find all the errors:
I’m also trying to center an image within a <figure> element in my tribute page project, but despite using display: block; and text-align: center;, the image is still not centering.
What could be causing the image not to center properly within its parent? Any suggestions would be appreciated!
