Problem with HTML/CSS Project 1 Tribute Page

HTML-CSS
1

I do not understand why in the CSS code "#img-div the “display: flex;” and “justify-content: center;” do not seem to affect #image and #image-caption that are nested within #img-div in the HTML. I have put question makrs for the code in the CSS for #image and #image-caption because I have tried several code variations and none seemed to work. If #image and #image-caption are within #img-div, shouldn’t the flexbox coding in #img-div be inherited by them? And of course I want #img-caption to be beneath #image, but can’t seem to get that to work. I am not asking for anyone to write out the code for the question marks, but just explain if and how the “:display: flex;” and "justify-content: center; do affect the nexted #image and #img-caption, or if not, what is an alternative. And of course I have to get the #img-caption below the #img.

HTML

<main id="main">
  <h2 id="title">Henry A. Wallace  33rd Vice President of the United States, pioneer of modern agriculture.</h2>
 <div id="img-div">
  <img src="https://wallace.org/wp-content/uploads/2015/02/HenryAWallace1.jpg" id="image">
   <p id="img-caption"> Henry A. Wallace, 33rd Vice President of the United States</p>
</div>

</main>

CSS

#main {

#title {
  text-align: center;
  padding: 20px;
  background-color: lightblue;
  font-family: monospace;
}
#img-div {
  display: flex;
  justify-content: center;
}  
#image {
  ?????
??????
??????
 }
#img-caption {
  ??????
??????
???????
}
}
2

Hello there,

I’ve edited your post 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This could be avoided, by editing your post to provide a link to your project

3

display:flex comes with flex-direction:row by default → the elements sit next to each other. If you want the caption below the image, you’ll have to set flex-direction:column on the flex-container.