Align flex items closer together - html

Question

I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?
EDIT: I've added the entire code for the bottom half.
This is how it currently looks:
This is how I want it to look:
.firstsection {
width: 100%;
height: 100;
}
.firstsection h1 {
color: rgb(255, 255, 255);
display: block;
font-size: 36px;
font-weight: 300;
line-height: 42.0001px;
padding-bottom: 14px;
text-align: center;
}
.firstsection {
display: block;
width: 100%;
height: 400px;
background-color: #414141;
float: left;
}
.bottomheader {
margin-top: 40px;
color: white;
font-size: 40px;
position: relative;
top: -20px;
}
.READMORE {
display: inline;
position: relative;
top: -40px;
left: 642px;
font-size: 16px;
text-align: center;
border: 1px solid white;
height: 50px;
padding: 20px;
}
.pop .READMORE a {
color: white;
text-decoration: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: black;
width: 30%;
border-top: 3px solid red;
background-color: white;
height: 80px;
}
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.pop {
float: right;
height: 100px;
width: 100%;
text-align: center;
}
<section style="background-color: #293352" class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section style="background-color: #293352" class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content</h3>
</section>

Answer 1

All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content
I created a fiddle
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.

Answer 2

You can use the CSS GRID to align them properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.firstsection {
display: block;
width: 100%;
background-color: #293352;
padding: 50px 20px;
}
h3 {
color: black;
width: 100%;
border-top: 3px solid red;
background-color: white;
height: 130px;
margin: 0;
}
.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<section class="firstsection">
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx

Answer 3

here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:
example below to run in fullpage mode then resize the window to see if the behavior is what you expect.
body {
margin: 0;
background-color: #293352;
}
.grid {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
.pop {
color: white;
text-align: center;
position: relative;
padding: 1em 10em;
}
.pop h4 {
position: absolute;
right: 1rem;
top: 0.5rem;
border: solid 1px;
padding: 1em;
}
section.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
align-items: center;
width: max-content;
max-width:100%;
margin: auto;
gap: 1em;
}
.firstsection:before,
.firstsection:after {
content: "";
grid-column: span 3;
}
.firstsection > * {
box-sizing: border-box;
min-width: 26%;
background: white;
height: 100%;
padding: 1em;
border-top: solid red;
max-width:30vw;
}
<div class="grid">
<section class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content <br> and an extra line</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content or grow the column to my width if there's enough room.</h3>
</section>
</div>
here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY