我试图显示数据库中的数据，但每当我连接它时，整个页面都会重复-从标题到一行，然后它再次显示标题，就像我拆分了页面一样，然后又显示了数据库中的另一行。
我想显示的数据一样，产品页旁边的另一个，但它只显示一个，然后重复整个页面。
这是我尝试过的代码--页面从主容器中重复并显示一行，然后再次重复主容器。

<?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>

样式.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;
}