I am currently working on getting the images to display within a pre-designed box that I set up. However, the images are appearing too wide and extending beyond the 50em width of the box. Additionally, they seem quite large in terms of height, and I'm unsure if this is simply due to the image size or an issue with the code. I am utilizing flexbox for this layout.
Currently, when there are no images present, it appears as though they are all in a single line due to the wrapping, but once the images are added, the layout starts to malfunction.
main{
width:50em;
border-style:solid;
display:flex;
}
.images{
display: flex;
flex-direction: row;
flex: 1 1 25em;
flex-wrap: wrap;
flex-grow: 1;
}<!DOCTYPE html>
<html>
<head>
<!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
<meta charset="UTF-8">
<!-- A link to reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<main class="wrapper">
<header id="images">
<img src="student-misc-02.jpg" alt="student1">
<img src="student-misc-06.jpg" alt="student1">
<img src="student-misc-08.jpg" alt="student1">
<img src="student-misc-12.jpg" alt="student1">
<img src="student-misc-19.jpg" alt="student1">
<img src="student-misc-20.jpg" alt="student1">
</header>
</main>
</body>
</html>