I’m trying to make a streaming service website as practice, but the problem is when I put images, titles and episode lists in a way like columns and rows. For the image on top over I, tried changing the margin or other things but it didn’t work.
I tried to change the margin, and perhaps put a container on it but it didn’t work, I want it to be like this:
existing streaming service
It ended up lining up. Likes this:
My Streaming Service
I want to line up at least four columns containing a poster, title and episode. At first, the row is ok but the second and further overlaps on top of the first. This is the code:
.column {
background-color: rgb(249, 215, 142);
float: left;
width: 200px;
padding: 20px;
height: 200px;
grid-template-columns: 1fr 1fr 1fr;
}
.row:after {
content: "";
display: grid;
clear: both;
}
<div class="row">
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg"
style="width:200px;height:270px; margin-bottom:10px; margin-right: 15px; border:none;">
<p class="video-title">Oshi No Ko Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg"
alt="Failure Frame Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Failure Frame</p>
<p class="video-episode">Season 1 Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg"
alt="Vanguard Divinez Season 2" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Vanguard Divinez Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg"
alt="Alya Sometimes Hides Her Feelings in Russian Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy.jpg"
alt="7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World.jpg"
alt="As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Chillin' in Another World with Level 2 Cheats.jpg"
alt="Chillin' in Another World with Level 2 Cheats Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Chillin' in Another World with Level 2 Cheats Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Fairy Tail 100 Years Quest.jpg"
alt="Fairy Tail 100 Years Quest Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Fairy Tail 100 Years Quest Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/I Parry Everything.jpg"
alt="I Parry Everything Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">I Parry Everything Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
</div>
Anyone know how to fix it.