Так что я просто экспериментировал и сделал это. Проблема в том, что все элементы в div выходят из контейнера по высоте и idk, как сделать так, чтобы они оставались внутри.
.col-4{
background-color:yellow;
width: 100%;
height: 200px;}
.row{
width: 300px;
height:auto;
}
.img{
width:100%;
height:auto;
}
<head>
<body>
<div class="row">
<div class="col-4 col-12-mobile">
<article class="item">
<a href="student performancve prediction.html" ckass="image fit" target="_blank">
<img src="https://i.ibb.co/jV8T6cL/image.jpg" class="img" alt="" />
<h3>Student Performance Prediction:<br>
A Deep Learning Approach </h3>
<hr style="height:1pt; visibility:hidden;" />
<p style="font-size:12pt; margin-left:1.5em; color:rgb(180, 180, 180); float:left;" align="left">R, Python</p>
<p style="font-size:12pt; margin-right:1.5em; color:rgb(11809, 180, 180); float:right; line-height:1.5em;" align="right">Last Updated: <br>11 Jan, 2020</p>
<p><br></p>
</a>
</article>
</div>
</div>
</body>
</head>