PHP: Populating data in div - php

Question

I'm trying to populate data in a div. Which works fine except that, the first div of data will be repeated once as shown on the attached image. I couldn't see any logical error in my code, and hope someone could kindly help me.
<div class="posts">
<?php
include("dbconn.php");
$sql = "SELECT *
FROM posts p
INNER JOIN users u
ON p.userID=u.userID
INNER JOIN courses c
ON p.courseID=c.courseID;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
?>
<section class="post">
<header class="post-header"> <img class="post-avatar" height="48" width="48" src="image/common/tilo-avatar.png">
<h2 class="post-title"><?php echo $row["postTitle"]; ?></h2>
<p class="post-meta"> By <?php echo $row["nickname"]; ?> under <a class="post-category post-category-design" href="#"><?php echo $row["courseName"]; ?></a> </p>
</header>
<div class="post-description">
<p> <?php echo $row["postContent"]; ?> </p>
</div>
</section>
<?php
}
} else {
echo "no questions yet";
}
?>
</div>
image