problem showing repeated whole page when trying to display data from database - php

Question

I'm trying to display the data from the database, but whenever I connect it the whole page gets repeated - from the head title to a row and then it shows the head title again as if I had split the page, and another row from the database.
I want to show the data like the products page next to each other but it only shows one and then repeats the whole page.
This is my code that I tried - the page gets repeated from the main-container and shows one row, then repeats the main container again.
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
//i dont know if i have to show the whole code but this is only the code part where everything gets repeated
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</body>
for the style.css\\
.main-container{
width: 90vw;
margin: 0 auto;
padding: 40px 0;
}
.main-container h2{
text-align: center;
padding: 90px 0;
font-size: 32px;
color: #fff;
}
.main-container p{
font-weight: 300;
padding: 10px 0;
opacity: 0.7;
text-align: center;
}
.post-main-container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 60px;
}
.post-main-container div{
box-shadow: 0px 8px 27px -12px rgba(0, 0, 0, 0.64);
}
.post-img{
position: relative;
width: 2vw;
height: 19vw;
}
.post-img img{
position: absolute;
left: 20px;
width: 17vw;
height: 19vw;
}
.post-content{
padding: 25px;
}
.post-content-top{
background: #2b1055;
color: #fff;
opacity: 0,9;
padding: 5px 0 5px 15px;
}
.post-content-top span{
padding-right: 20px;
}
.post-content h2{
font-size: 22px;
padding: 12px 0;
font-weight: 400;
}
.post-content p{
opacity: 0.7;
font-size: 15px;
line-height: 1.8;
color: ghostwhite;
}
.button-btn a {
padding: 8px 15px;
display: block;
font-family:'Almarai', sans-serif ;
font-size: 15px;
cursor: pointer;
background: transparent;
border-radius: 20px;
width: 50%;
border: 2px solid #fff;
color: #fff;
margin: 5px auto;
padding: 0.4rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
.button-btn a:hover{
background:#2b1055;
}

Answer 1

Because your entire page is in the while loop it will duplicate the whole page multiple times. I don't know if this is exactly what you want but I suggest you doing it something like this:
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<?php while ($row = mysqli_fetch_assoc($allopp)) { ?>
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row[" images "]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"
<?php echo $row["Title"]; ?>"</h2>
<p>"
<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
<?php } ?>
</div>
</div>
This will only loop the post-main-container.

Answer 2

This is the code you are looking for
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span>
<i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?>
</span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
<?php
}
?>
</div>
</div>
</div>