Why won't my images align horizontally on css - html

Question

Hi I have 6 images that I have in my website that are appearing vertically stacked but I want them to be horizontally stacked and center aligned. 4 of the images have captions too that I need to appear right below each image... can someone please help thanks so much
Here is my html:
<div class="container-fluid">
<div class="container-of-images">
<img src="chick2.png">
<figure>
<img id="img1" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img2" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img3" class="threeChoices" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img4" class="fourChoices" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<img src="chick1.png">
</div>
</div>
And here is my CSS:
body {
background-color: #b6e6bd;
line-height: 1.6;
}
.container-fluid {
padding: 1% 20%;
margin: auto;
text-align: center;
}
img {
width: 100px;
line-height: 0;
margin: 0 1%;
display: flex;
justify-content: center;
}
figcaption {
text-align: center;
width: 100px;
}

Answer 1

Try this CSS code, the problem I found was that display: inline-block should have been used instead of flex.
body {
background-color: #b6e6bd;
line-height: 1.6;
}
.container-fluid {
margin: auto;
text-align: center;
width:100%;
}
img {
width: 100px;
line-height: 0;
margin: 0 1%;
display: inline-block;
justify-content: center;
vertical-align: middle;
}
figcaption {
text-align:
center;
width: 100px;
}
figure {
display: inline-block;vertical-align: middle;
}

Answer 2

Make your image container a flex element that lays out the content in a row:
.container-of-images {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}

Answer 3

You need to add dispay: inline; or dispay: inline-block; to your css.
body {
background-color: #b6e6bd;
line-height: 1.6;
}
.container-fluid {
padding: 1% 20%;
margin: auto;
text-align: center;
}
img {
width: 100px;
line-height: 0;
margin: 0 1%;
display: flex;
justify-content: center;
display: inline;
}
figcaption {
text-align: center;
width: 100px;
}

Answer 4

Did you try to use flexbox on the container? Try this:
.container-of-images {
display: flex;
}

Answer 5

Based on your if you add the CSS property display:flex to container-of-images class it will solve your problem. But you solve be aware of the responsive design for it.
.container-of-images {
display: flex;
flex-direction: row; /* extra line flex alone can solve your problem */
justify-content: space-around; /* extra line to space images around */
}