Gap between elements and wrapping not consistent - html

Question

I have a page where the left and right are split evenly. On the right side, I have a bunch of div elements containing an img and a span. What I'm trying to do is show four of these div elements at MOST per row, and start to wrap on smaller screens, with a specific gap.
The problem I'm having is the gap is wider on bigger screens, and the elements squish together on smaller screens instead of wrapping, regardless of what gap value I set.
Here's a gif showing what's happening: https://gfycat.com/remorsefulglossyherring
Here's the relevant HTML (only the right side of the page which contains these divs):
<div
class="about"
fxFlex="50%"
fxLayout="row wrap"
fxLayoutGap="10px grid"
fxLayoutAlign="center center"
>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/c-sharp.png" alt="C#" />
<span class="caption">C#</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/.net-core.png" alt=".NET Core" />
<span class="caption">.NET Core</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/wpf.png" alt="WPF" />
<span class="caption">WPF</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/winforms.jpg" alt="WinForms" />
<span class="caption">WinForms</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/angular.png" alt="Angular" />
<span class="caption">Angular</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/nodejs.png" alt="NodeJS" />
<span class="caption">Node.js</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/html5.png" alt="HTML5" />
<span class="caption">HTML5</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/css3.png" alt="CSS3" />
<span class="caption">CSS3</span>
</div>
<div fxFlex="25%" class="item">
<img class="img-skills" src="assets/mongodb.png" alt="MongoDB" />
<span class="caption">MongoDB</span>
</div>
<div fxFlex="25%" class="item">
<img
class="img-skills"
src="assets/mssql.png"
alt="Microsoft SQL Server"
/>
<span class="caption">Microsoft SQL Server</span>
</div>
</div>
Here's the css:
.about {
min-height: 100vh;
justify-content: center;
height: 100%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
.img-skills {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}

Answer 1

This is the simple idea, but this will help you for sure to start with:
Play around here : fiddle
.MainDiv {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
}
.first {
border: 1px solid black;
height: 100px;
width: 100px;
background-color: gray;
margin: 5px;
}
<div class="MainDiv">
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
<div class="first"></div>
</div>

Answer 2

Make it both left and right divs separated with the main container.
Your right side div should be like this below.
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div>
<div>2. Two</div>
<div>3. Three</div>
<div>4. Four</div>
</div>