PHP images are not displaying properly - php

Question

Here is my code.
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="box">
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
Having a problem with the images are not displaying the way I expected to, every time I insert or add a new image, it always go to the next row.
This is what I want for the layout.
But instead it keeps on displaying on the next row every time I add new image.
I also tried put it in a row class, but nothing happens.
Here is my CSS code.
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.panel {
height: 230px;
min-width: 250px;
margin: 10px;
flex: 1 1 30%;
}
.image {
background-size: cover;
height: 230px;
}
.overlay {
position: relative;
background-color: rgba(15, 10, 36, 0.5);
height: 230px;
}
.content {
text-align: center;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 1

Solved this by moving the div container outside the php code.
Check the code below.
<div class="box"> <!-- This div -->
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div> <!-- and this div -->
I've tried different approach but it did not work with me,
I hope this can help other people who's having the same problem as mine. Just put the div container outside the iteration.