I am facing an issue with displaying the last four images at the end of the page horizontally. When there is no caption, I can use the display:flex property to achieve this layout, but as soon as I add a caption, the images are displayed vertically instead. I need assistance in fixing this problem specifically with the last four images.
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;
}
...
</pre>
<pre><code><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">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="contact">Contact</a>
</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>