msqli_fetch_array or assoc and css getting empty spaces - php

Question

I am developing a simple project but encountered a problem which I can not find solution.
The follow php code:
<?php include "header.php"; ?>
<?php
$subtitle = "Os teus animes favoritos diariamente!";
$conn = mysqli_connect("$host","$dbuser","$dbpw","$db");
if (mysqli_connect_errno())
{
echo "Falha ao ligar à Base de Dados: " . mysqli_connect_error();
}
$result = mysqli_query($conn, "SELECT * FROM m_capitulos ORDER BY 'm_capitulos'.'id_cap' DESC LIMIT 30") or die(mysqli_error($conn));
mysqli_close($conn);
?>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size mbr-after-navbar" id="features1-3" style="background-color: rgb(255, 255, 255);">
<div class="mbr-section__container container"><!-- "mbr-section__container--std-top-padding" para dar padding no top! -->
<div class="mbr-section__row row">
<?php while ($row = mysqli_fetch_array($result)){ ?>
<div class="mbr-section__col col-xs-12 col-sm-4">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text"><?php echo $row['nombre_cap']; ?></h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last">
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">ASSISTIR</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<?php include "footer.php"; ?>
But when I remove the page css the empty space between the results disappears.
The Empty Space on the midle of my content box :

Answer 1

The result on the right just above the space is shorter, thus the next element goes below it instead of going to next row. I suggest you split elements into groups of 3 so that they can go into rows, or alternatively set the height for each result so that they all line up.
The example below adds a counter; every time you run through an element it checks if the element count divides by three, and if so, starts a new row. The same check is done at the end, except that it checks whether the element is the last in the row-of-three, and if so, ends the row tag.
<?php
$i = 0;
while ($row = mysqli_fetch_array($result)){ ?>
<?php if ($i % 3 == 0): ?><div class="row"><?php endif; ?>
<div class="mbr-section__col col-xs-12 col-sm-4">
<div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
<figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure>
</div>
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text"><?php echo $row['nombre_cap']; ?></h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last">
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">DOWNLOAD</div>
<br>
<div class="mbr-buttons mbr-buttons--center">ASSISTIR</div>
</div>
</div>
<?php if ($i % 3 == 2): ?></div><?php endif;
$i++
?>
<?php } ?>