Currently, I am in the process of creating a portfolio page and I am utilizing placeholder images until I have actual projects to showcase. I am encountering difficulties trying to structure one large image with two to four smaller images underneath it, all evenly filling a container.
Despite attempting to follow tutorials from W3 Schools on Image Grids, Responsive Image Grids, and Portfolio Galleries, I have not been successful.
Below is the code snippet causing issues:
.content-section {
margin-bottom: 20px;
width: 100%;
padding: 20px;
display: flex;
align-items: center;
}
.content-section div {
border-left: 3px solid gray;
width: 75%;
padding: 20px;
text-align: left;
}
.content-section h2 {
width: 15%;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: right;
padding-right: 10px;
}
.yoga img {
width: 100%;
border: 5px solid steelblue;
}<section id="my-work" class="content-section">
<h2>Work</h2>
<div class="yoga">
<img src="img\yoga.jpg" alt="Yoga Project">
</div>
</section>The issue arises when I attempt to incorporate additional images. The border between the h2 heading and the images either shifts or duplicates next to the new images.
I trust this question adheres to the guidelines, as I reviewed them prior to posting. I would greatly appreciate any assistance in directing me towards a solution! I have included a link to the live website as well.
Thank you!!