Divs aren't sizing correctly, text outside of divs - css

Question

am a bit confused why doesn't div background contain the text under the image... i tried to use more padding for the text but also didn't work what am I trying to do here is to align the text under the image and also make the text have the same background as the "cardo" div have .. i tried similar codes but nothing if someone can help me here I would be so thankful.
$('#owl-carousel').owlCarousel({
loop: true,
margin: 30,
dots: true,
nav: false,
rtl: true,
items: 2,
})
.text {
text-align: center;
height: 100px;
background: #0b0a0d;
color: #FFF;
}
.text .logo a{
margin: 0;
line-height: 100px;
font-size: 48px;
font-family: 'Zen Dots', cursive;}
.nav {
background: #0c70de;
color: #FFF;
display: flex;
z-index: 9999;
}
.text .logo a{
color: #FFF;
text-decoration: none
}
.nav ul {
margin: 0 auto;
padding: 0;
display: flex;
/* width: 50%; */
/* margin-left: auto; */
}
ul li{
padding: 20px;
list-style: none
}
ul li a{
color: #FFF;
display: block;
text-decoration: none;
text-transform: uppercase;
font-family: 'Changa', sans-serif;
}
.sticky{
position: fixed;
top: 0;
left: 0;
width: 100%
}
.contain {
margin: 0 auto;
max-width: 1200px;
width: 100%;
margin-top: 50px;
}
.item {
align-items: center;
display: flex;
height: 300px;
justify-content: center;
}
/* slider */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
body {
font-family: 'Raleway', sans-serif;
font-weight: thin;
background: black;
margin: 0;
padding: 0;
}
body:after{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
margin: 0;
z-index: -1;
width: 200%;
height: 200%;
background-color: #16151d;
}
.movie-card {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 800px;
height: 300px;
background-position: center;
background-size: cover;
margin: 4vh auto;
border-radius: 4px;
box-shadow: 2px 3px 12px rgba(0, 0, 0, .4);
color: white;
padding: 2vh 3%;
}
.movie-card:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background: linear-gradient(to left, rgba(40,40,60,1) 0%,rgba(40,0,60,0) 90%);
background-blend-mode: multiply;
will-change: transform;
z-index: 0;
}
i {
font-size: .7em;
color: #ff5b84;
}
h1 {
font-size: 170%;
position: relative;
z-index: 10;
}
span {
display: inline-block;
position: relative;
z-index: 10;
margin-right: 80px;
color: rgb(210, 210, 210);
}
.watch {
display: block;
border: 1px solid white;
border-radius: 4px;
position: relative;
z-index: 10;
color: white;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, .3);
margin: 20px 0px;
outline: none;
box-shadow: 0 0 10px rgba(0,0,0,.5);
transition: all .2s;
}
button:hover {
background: rgba(255, 255, 255, .8);
color: black;
box-shadow: 0 0 10px rgba(255,255,255,.5);
mix-blend-mode: screen;
}
button:active {
transform: translateY(2px);
}
p {
position: relative;
z-index: 10;
font-size: .8em;
width: 60%;
height: 35%;
}
#media (max-width: 768px) {
body {
/* background: none; */
}
.movie-card {
width: 75%;
height: 200px;
}
h1 {
font-size: 120%;
}
p {
display: none;
/* overflow: hidden;
width: 100%;
height: 30%; */
}
.watch {
margin: 5% auto;
}
}
#media (max-width: 500px) {
.movie-card {
width: 100%;
}
}
.hot {
background-color: #694ba1;
padding: 8px 15px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.hot h3 {
color: #FFF;
}
h3 {
font-size: 1.1em;
line-height: 20px;
font-weight: 500;
margin: 0;
position: relative;
}
.anime-list {
background-color: #222;
}
.cardo {
background-size: cover;
background-position: center;
color: white;
height: 10rem;
margin: 8px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.cardo img {
width: 100%;
height: 100%;
}
.caption {
position: relative;
bottom: 0;
}
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
}
/* Screen larger than 600px? 2 column */
#media (min-width: 600px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* Screen larger than 900px? 3 columns */
#media (min-width: 900px) {
.cards { grid-template-columns: repeat(5, 1fr); }
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>owl</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Changa:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
</head>
<body>
<!-- * Header START -->
<div class="text">
<div class="logo">
ON ANIME
</div>
</div>
<div class="nav">
<ul>
<li>الرئيسية</li>
<li>قائمة الانميات</li>
<li>افلام الانمي</li>
</ul>
</div>
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://images3.alphacoders.com/820/thumb-1920-820754.png");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
<div class="item">
<div class="movie-card" style="background-image: url("https://wallpaperaccess.com/full/2412138.jpg");"><h1>The Incredibles 2</h1><span>92 min</span><span>5 <i class="fas fa-star"></i></span><p>Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.</p><button class="watch">WATCH MOVIE</button></div>
</div>
</div>
</div>
<div class="contain">
<div class="postss">
<div class="hot">
<h3>انميات مميزة</h3>
</div>
<div class="anime-list">
<div class="cards">
<div class="cardo">
<img src="https://wallpaperaccess.com/full/2412138.jpg">
<div class="caption">
my text
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script src="script.js" async defer></script>
</body>
</html>

Answer 1

The problem is in your image style. You shouldn't use both width and height because it stretches the image and you should use 90% for the height to leave space for the text.
.cardo img {
height: 90%;
}