How TO - Align Images Side By Side

I am following this tutorial on w3schools. I am creating a social site and I want to show users an explore page and I want the images to be side by side maybe 3 or 4 pics a row and then break and then show another 3 or 4. Right now it's completely off. .

As you can see, it is on top of each other and it is all on the right side of the page. What am I missing ? I want it to show exactly how it looks on the example.

<div class="row">
<?php

    // output data of each row
    while ($explore_image->fetch()) {

        if ($userLoggedIn != $added_by) {

            if (!empty($image)) {
                echo '<div class="row"><div class="explore_column">';
                echo "<a href='$image'><img src='$image' ></a><p> $added_by $likes </p></br><br><br><br></div></div><br>";
            }
        }
    }
    
    $explore_image->close();
    $con->close();

?>
</div>
* {
box-sizing: border-box;
}

.row {
display: flex;
}

/* Create three equal columns that sits next to each other */
.explore_column {
flex: 100.33%;
padding: 5px;
}

@media screen and (max-width: 500px) {
.explore_column {
width: 100%;
}
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.explore_column {
float: left;
width: 33.33%;
padding: 5px;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}