im having some trouble figuring out why my #img isnt a decendent of the img div element when it is within the tags for my img-div. my code i will post below.
im also having trouble with some of the formatting options at the end of the module. specifically the centering my img within its parent, its max width being 100% and its display being block. ive tried a few things over the last couple weeks as i get to this but cannot figure out the solution. i would love some advice.
<DOCTYPE! html>
<html lang="en">
<main id="main">
<link rel="stylesheet" href="styles.css">
<h1 id="title">
Tribute to Luffy
</h1>
<div id="img-div"><img id="img" src="https://th.bing.com/th/id/OIP.UQm6HPcmQrb2ijXzdJGzQAHaEo?rs=1&pid=ImgDetMain">
<Figcaption id="img-caption">The Future Pirate King</figcaption>
<p id="tribute-info">Luffy D Monkey is a pirate from the East Blue who is famous for numerous events throughout the seas as a pirate.</p>
</div>
<ul>
<li>Stretchy</li>
<li>Much Food</li>
<li>WILL fight you</li>
<li>Also will liberate your country unintentionally</li>
<li>Afro</li>
</ul>
<img src="https://pa1.narvii.com/6239/da7f1917e622ad808afabb3bc8fff2f90f477570_hq.gif" max-width="100%" height="auto" display="block" id="image" >
<a id="tribute-link" href="https://onepiece.fandom.com/wiki/Monkey_D._Luffy" target="_blank" >Learn More Here at a link from the wiki!</a>
</main>
<footer>
</footer>
</html>