problem showing repeated whole page when trying to display data from database – PHP

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">
              <a href="#">التفاصيل والتسجيل</a>
                   </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;
}