How to style tables in articles page? - php

Question

I imported a database in phpMyAdmin that contains articles. I want it to be regulated, to automatically post the image, title, and contents in the articles page. And to direct it to another page when clicked.
But when rendering the articles page, the second row has two columns offset. I think it's the content of the first 2 articles that's making the problem since I did another tables with few contents in it then it renders exactly the way I want(a row that contains 3 articles an no offset below it). I'm a newbie here, feel free to suggest if there's a better way. I genuinely appreciate it. Thank you!
<div class="blogs-2" id="blogs-2">
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="row">
<?php
$sql = "SELECT * FROM news LIMIT 20";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<div class="col-md-4" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0; ">
<div class="card card-plain card-blog" style="max-height:300px;float:left;">
<div class="card-image">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<img class="img img-raised" src="<?php header("Content-type: image/png"); echo $row['featured_image'] ?>" style="max-height:300px;" />
</a>
</div>
<div class="card-content">
<h4 class="card-title">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<?php echo $row['title']; ?>
</a>
</h4>
<p class="card-description" style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
<?php echo $row['content']; ?>
</p>
<p class="card-description">
Read More
</p>
</div>
</div>
</div>
<?php
}
}
else {
echo "<p>No News Articles to Display</p>";
}
?>
</div>
</div>
<div class="col-md-2">
<h4 class="title">Recent News</h4>
<ul>
<?php
$sql = "SELECT * FROM news LIMIT 5";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<li style='list-style:none;color:black;padding-top:5px;padding-bottom:5px;'><a href='../news/article.php?id={$row['id']}'>" .$row['title']. "</a></li>";
}
}
else {
echo "<li style='list-style:none;'>No Recent News</li>";
}
?>
</ul>
</div>
</div><!--row-->
</div><!--container-->
</div><!--blogs-->