My tribute page is called “Dogs: A Tribute to Man’s Best Friend”. Any suggestions to make it look nicer? I wanted to try making something with html and css from scratch, so I’ve skipped flexbox and grid for now.
Also, anyone know how to make the caption and paragraph align with the width of the image? I don’t really like how the text sits off to the left like that.
So, the page itself is very nicely done, and a great use of semantic HTML elements. I’m still poking, but what I see so far? Nicely done.
The reason you’re having an issue with the caption and the image? The figure tag is not quite right. A figure consists of two parts: an img and a figcaption. So
<figure>
<img src='my-cute-dog-pic.jpg' alt='Tan and black German Shepherd dog' />
<figcaption>
According to the American Kennel Club
</figcaption>
</figure>
Of course, when you do THAT, the image will be aligned with the caption. And neither will be centered. But that’s another issue… 
Easiest fix I can think of for that particular problem might be to add a css rule to the figure selector: margin: auto; will set the left and right margins around the figure to be equal, and thus center the figure.
Edit: Looking over your code, one other suggestion (not one that’s a make-or-break thing, simply more of a “something to think about”) - you have that figure in a div. There is nothing else in the div, it’s the only thing. So you have a box that contains… a box.
If it was a page I was building, and I saw that the figure was going to be the only thing in that div? I’d just assign the id img-div to the figure and get rid of the wrapping div. Again, not a must, not a deal breaker, but it creates pointless layers of heirarchy for no real reason.