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:

In your PHP loop, you have the <div class='row'> added in there so it would be adding this in 3 times, hence it appearing below each other. Try the below perhaps.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<!--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 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>
<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>

Put the html code out of php echo. Some time this happens to me also. For some reason this works.
try like this

CSS Style

.carousel-caption .row{
display: inline-flex;
width: 200px;
}

PHP Loop

   <?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"]; 
?>
<div class='row'>
<div id='eventCard' align='center'>   
<hr>
<h1><?php echo $event?></h1>
<br>
<p>
<i class='far fa-calendar-times'></i> <?php echo $date; ?>
<br>
<i class='fas fa-map-marker-alt'></i> <?php echo $loc; ?>
<br>
<i class='far fa-clock'></i><?php echo $time; ?>
<br>
<br>
<a href='events.php'>More Info</a>
</p>
<hr>
</div>
</div>
<?php
}
}
?>

@PHPology

Amended source code:

<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'>
<div class='row'>
<div id='eventCard' align='center' class='col-md-4'>
<!--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 " 
<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>

I have tried it both your suggested way and the way I have posted in this comment, but the data is still stacking vertically.