Php versions – Presentation issue when displaying dynamic data using PHP inside a Bootstrap Carousel

I am creating a dynamic events calendar for a website homepage which displays from the database using PHP. I am also using the Bootstrap framework (version 4.4.1) to construct a carousel in which to display the upcoming events 3 at a time per carousel-item.

My problem arrises when more than one event is displayed from the database. The retrieved data is stacked vertically instead of horizontally. However, if I hardcode three ‘events’ inside the carousel using HTML, the events are formatted correctly in a horizontal manner.

I have tried several approaches and I am still struggling to find a solution, so I would greatly appreciate any help.

HTML/PHP:

   <!--CAROUSEL TEST --> 
   <!--Events panel-->
    <!-- Grid row-->
    <div class="row">

        <div id="eventsTitle" align="center" class="col-md-12">

              <h1>Events</h1>       

          </div>
    </div>    

<div class="container">
<div class="row">           
<div class="col-md-12">

<div id='carouselExampleControls' class='carousel slide' data-ride='carousel'>
<div class='carousel-inner'>
<div class='carousel-item active'>
  <div class='carousel-caption'>

    <!--Fetch and display events from database -->          
    <?php

    $query = "SELECT * FROM events ORDER BY eventDate LIMIT 3;";

        $result = mysqli_query($conn, $query);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $event = $row["eventName"];
                $date = $row["eventDate"];
                $time = $row["eventTime"];
                $loc = $row["eventPlace"];  
                $desc = $row["eventDesc"]; 

        echo " 
        <div class='row'>

        <div id='eventCard' align='center' class='col-md-4'>   

              <hr>

              <h1>$event</h1>
              <br>
              <p><i class='far fa-calendar-times'></i> $date
              <br>
              <i class='fas fa-map-marker-alt'></i> $loc
              <br>
              <i class='far fa-clock'></i> $time
              <br>
              <br>
              <a href='events.php'>More Info </a>
              </p>
              <hr>

          </div>

  </div>

      ";

             }
        }

    ?>

</div> <!--end CAROUSEL CAPTION -->


</div>  <!-- end CAROUSEL ACTIVE -->  

    <!-- SECOND CAROUSEL SLIDE --> 
    <div class='carousel-item'>
    <div class='carousel-caption'>

      <div class='row'>

          <div id='eventCard' align='center' class='col-md-4'>     
          </div>

          <div id='eventCard' align='center' class='col-md-4'>   
          </div>

          <div id='eventCard' align='center' class='col-md-4'>      
          </div>

  </div>


  </div>
</div>


  </div> <!--end CAROUSEL INNER -->


  <a class='carousel-control-prev' href='#carouselExampleControls' role='button' data-     slide='prev'>
   <span class='carousel-control-prev-icon' aria-hidden='true'></span>
   <span class='sr-only'>Previous</span>
  </a>
<a class='carousel-control-next' href='#carouselExampleControls' role='button' data-slide='next'>
   <span class='carousel-control-next-icon' aria-hidden='true'></span>
   <span class='sr-only'>Next</span>
  </a>
 </div> <!--end CAROUSEL CONTROLS -->

              <div id="eventButton" align="right" class="col-md-12">   

                <a class='button' href="events.php"><i class="fas fa-chevron-right"></i> MORE EVENTS</a>

            </div>

    </div> <!--end CAROUSEL COLS -->  
</div> <!--end CAROUSEL ROWS -->
</div> <!--end CAROUSEL CONTAINER-->




<!-- // end CAROUSEL TEST -->  

CSS:

#eventCard  {

padding: 3em;

}

/*TEST CAROUSEL */

body{
background-color: #fff;
}
.carousel{
margin-top: 0px;
}
.carousel-inner{
height: 350px;
}
.carousel-caption{
color: #242424;
top: 50%;
}

Image example of desired result from HTML hardcoding of event data:

Image example of results when data is retrieved from database using PHP: