The area you are mentioning is known as margin. The width of the images in the .gallery is simply set to 200 without a unit specified, resulting in it being ignored by default in CSS.
Therefore, regardless of the actual size of the images in your gallery, the cards will adjust to the default size of the image. For example, all idk.png images are 1280 x 720 pixels (which is a 16:9 ratio). However, one image on the left has different dimensions at 768 x 432 pixels (also a 16:9 ratio).
The key difference lies in how CSS handles margins based on image sizes. When an image is scaled down, its margins also scale down accordingly. This explains why the margins appear smaller between all idk.png images. To resolve this issue, it's recommended to set a specific width for all images, not just those labeled as "idk.png".
<!DOCTYPE html>
<html>
<head>
<!-- Styles -->
<style>
/* Defining CSS styles */
</style>
<!-- Title and Fonts -->
<title>M100</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: myFont;
src: url(Nunito-SemiBold.ttf);
}
/* Additional CSS styling */
</style>
</head>
<body>
<div class="containter">
<div class="navbar">
<nav>
<ul>
<li><a href=".">đ Home</a></li>
<li><a href="./projects">đĻ Projects</a></li>
<li><a href="./resume">đ Resume</a></li>
<li><a href="./discord">đŦ Discord Server</a></li>
<li><a href="https://www.roblox.com/groups/16658958">đšī¸ M100 Studios</a></li>
</ul>
</nav>
</div>
<!-- Content Section -->
<div class="contentCenter">
<center>
<h1>Resume</h1>
<p>Details about past work experiences with added flair.
<img src="assets/images/cool-guy.png" width="25" height="25">
</p>
<br>
<p>Visit my projects on <a href="https://scratch.mit.edu/users/Micamaster100">Scratch</a> or <a href="github.com/Micamaster100">Github</a></p>
<br>
<h2>Games</h2>
</center>
<!-- Gallery Section -->
<div class="gallery">
<a target="_blank" href="https://www.roblox.com/games/16955585161">
<img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/obbydoxxedthing.png">
<div class="description">
Interactive Obby Experience
</div>
</a>
</div>
<div class="gallery">
<a target="_blank" href="about:blank">
<img src="https://raw.githubusercontent.com/Micamaster100/stuff/main/idk.png">
<div class="description">
Under Construction...
</div>
</a>
</div>
</div>
</div>
</body>
</html>