I'm experiencing a challenge with the code below in terms of large spaces being left when columns are collapsed. Is there a way to eliminate these spaces?
body {
font-family: sans-serif;
max-width: 100%;
overflow-x: hidden;
}
.poster {
height: 20%;
}
h2,
h3 {
display: inline;
}<div class="container-fluid">
<!--The top-->
<div class="row">
<div class="col-md-2">
<img src="mirzapur.jpg" class="poster" />
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<h2>Title:</h2>
<h3>Mirzapur</h3>
<br />
<h2>Ratings:</h2>
<h3>4/5</h3>
<br />
<h2>Number of Seasons:</h2>
<h3>1</h3>
<br />
</div>
<div class="col-md">
<h2>Available On :</h2>
<h3>Amazon Prime,Netflix</h3>
<br />
<h2>Year of release :</h2>
<h3>4/5</h3>
<br />
<h2>Genre:</h2>
<h3>Crime, Thriller, Action</h3>
<br />
</div>
</div>
</div>
</div>
</div>Screenshots: https://i.sstatic.net/Yjx5F.png https://i.sstatic.net/fOVOl.png
After reviewing the image above, it is evident that there are excessive spaces between the image and the other details. Is there a solution to remove these unwanted spaces?