How to make a text stay inside a div? - html

Question

The problem occurs when I resize the window into a smaller one. When the window is small it becomes like this.
But when the window size is maximized it appears like I intended it to be like this
Here is my html and css:
.highlight {
display: flex;
flex-direction: row;
justify-content: center;
}
.highlight-item {
padding: 0px;
font-family: Candara;
}
.highlight-item:hover {
opacity: 0.85;
}
.highlight-item img {
width: 100%;
float: left;
position: relative;
z-index: -5;
}
.highlight-des {
background: linear-gradient(0deg, rgba(2, 0, 36, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
height: 200px;
position: relative;
margin-top: 180px;
}
.highlight-des h1 {
position: absolute;
margin-top: 0%;
font-size: 2em;
font-weight: 300;
}
.highlight-des p {
position: absolute;
margin-top: 20%;
}
<div class="highlight">
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
</div>
Last but not least, since this is a school project nothing but HTML and pure CSS is allowed, thanks, everyone!

Answer 1

Here you go exactly you wanted. I have fixed you CSS a bit.
There was a problem with position and margins
Working JSFiddle
Run snippet to see it action.
.highlight {
display: flex;
flex-direction: row;
position: relative;
}
.highlight-item {
padding: 0px;
font-family: Candara;
width: 100%;
}
.highlight-item:hover {
opacity: 0.85;
}
.highlight-item img {
width: 100%;
float: left;
position: relative;
z-index: -5;
}
.highlight-des {
background: linear-gradient(0deg, rgba(2, 0, 36, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
height: 100%;
position: relative;
margin-top: 180px;
}
.highlight-des h1 {
font-size: 2em;
font-weight: 300;
}
<div class="highlight">
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
<div class="highlight-item col-4">
<img src="images/highlight-mockup.jpg" alt="">
<div class="highlight-des">
<h1>Title</h1>
<p>By: Author</p>
</div>
</div>
</div>