Responsive Web Design Projects - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**
/* file: index.html */
<link rel="stylesheet" href="styles.css">

<main id = "main">

 <h1 id = "title">Dr Norman Borlaug</h1>

<div id = "img-div">
 <img scr = "" id = "image">
</div>
<div id = "img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>

<h3 id = "tribute-info">Here's a time line of Dr. Borlaug's life:</h3>

<a href = "#" id = "tribute-link" target = "_blank"></a>
</main>
/* file: styles.css */
#main {
 align-items: center;
} 

img {
 display: block;
}

#image {
 max-width:100%;
 height: auto;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

I am finding it hard to understand what ’ Your #image should be centered within its parent.’ means. And ’ Your #img-caption should be a descendant of #img-div.’

Your #image should be centered within its parent.’ means.

Most elements are displayed as block by default. This means that the width of an element occupies the width of its parent element.
And all elements can be nested inside elements. This forms a parent-child relationship between the outer element and the inner element.

<div>
  <p>Hello World</p>
</div>

The code above suggests that the div element is the parent of the p element.

To centre the child element, there are several ways. One of the ways that were taught to you in previous step is to set the margin to auto. This will automatically calculate the left, right, up and down margin for your child element.

’ Your #img-caption should be a descendant of #img-div .’

Like the code explained above, elements nested inside an element can form a parent-child relationship. A descendant means it needs to be inside the element.

This sentence simply means, you need to have #img-caption inside the #img-div. It doesn’t have to be a direct child, but it needs to be somewhere inside img-caption.

Hope that helps/