How do I display images and their caption horizontally - html

Question

The last four images at the end of the page, I would like to display them horizontally. Without the caption, the images can be displayed horizontally with the display:flex property, but when I add a caption, the images will be displayed vertically. Sorry for the long code, but the last four images is what I need to be fixed.
body {
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #696969;
padding-top: 2rem;
/* padding-top and margin (in body tag) were used to eliminate the white spaces around the background color */
padding-bottom: 1rem;
text-align: center;
}
.profile-image {
height: 8rem;
width: 8rem;
border-radius: 20rem;
border: 0.3rem solid white;
transition: transform 1s;
}
.profile-image:hover {
transform: rotate(360deg);
transition: transform 1s;
}
.header-links {
padding-top: 2rem;
}
.header-links a {
color: white;
text-decoration: none;
padding: 1.9rem;
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
}
.header-links a:hover {
color: orange;
}
.name-title {
color: white;
font-family: 'Lexend Zetta', sans-serif;
}
.wallpaper {
width: 100%;
}
main {
background-color: azure;
margin-left: 1rem;
}
.about {
border-left: 0.2rem solid red;
border-right: 0.2rem solid red;
border-radius: 0.4rem;
padding: 0 0.3rem;
display: inline;
/* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
letter-spacing: 0.2rem;
}
.projects {
border-left: 0.2rem solid red;
border-right: 0.2rem solid red;
border-radius: 0.4rem;
padding: 0 0.3rem;
display: inline;
/* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
letter-spacing: 0.2rem;
display: flex;
justify-content: center;
}
.margin-top {
margin-top: 8rem;
}
.align-center {
justify-content: space-evenly;
/*justify-content: space-evenly and display-flex were added to center everything and stop skill elements from overlapping. It was originally text-align: center - although it centered everything, skill elements overlapped */
display: flex;
}
.align-center-1 ul {
/* a new align-center-1 was created just for the purpose of adjusting margin-right */
justify-content: space-evenly;
display: flex;
margin-right: 4rem;
}
.boxes img {
height: 14rem;
width: 14rem;
border: 2px solid red;
}
.boxes {
justify-content: space-evenly;
display: flex;
margin: 1rem;
}
.center {
text-align: center;
}
<section>
<header>
<div class="header">
<figure class="name-title">
<img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile photo">
<figcaption>
<h1>John Johnson</h1>
<h2>Front End Developer</h2>
</figcaption>
</figure>
<div class="header-links">
About
Projects
Contact
</div>
</div>
</header>
</section>
<section>
<img class="wallpaper" src="https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="mountains">
</section>
<section>
<main>
<div class="align-center">
<h1 id="about" class="about">About</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Maecenas
tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales,
augue velit cursus nunc</p>
<div class="align-center">
<h2>Skills</h2>
</div>
<div class="align-center-1">
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</div>
<section>
<div class="margin-top">
</div>
<div class="align-center">
<h1 id="projects" class="projects">Projects</h1>
</div>
<div class="boxes">
<figure>
<img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw">
<figcaption class="center">Winter</figcaption>
<img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg">
<figcaption class="center">Summer</figcaption>
<img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg">
<figcaption class="center">Spring</figcaption>
<img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg">
<figcaption class="center">Fall</figcaption>
</figure>
</div>
</main>

Answer 1

I think it's best practice to wrap <img> and <figcaption> both with individual <figure> tag. It also solves your issue without any CSS changes.
Updated Html code block
<div class="boxes">
<figure>
<img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw">
<figcaption class="center">Winter</figcaption>
</figure>
<figure>
<img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg">
<figcaption class="center">Summer</figcaption>
</figure>
<figure>
<img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg">
<figcaption class="center">Spring</figcaption>
</figure>
<figure>
<img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg">
<figcaption class="center">Fall</figcaption>
</figure>
</div>
Try this. I hope this is your desired output.
final output snip

Answer 2

Try wrapping each <img> and <figcaption> element in another element (such as a <div>) and give the parent element (here <figure>) the display: flex; style.

Answer 3

From MDN - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure's caption.
This implies that there should be a max of one <figcaption> per <figure>. So each <img> and <figcaption> should be in a separate <figure>.