ARTICLE AD BOX
I got the text and image to work how I wanted when I defined h1 class="hero-text" but when I want to add h2 and h3 below it (also on top of the hero image) I couldn't get it to work. They either stacked on top of each other or was spaced out a huge amount when I tried to put them in their own divs. How do I fix this?
.hero-image{
background-image:linear-gradient(to bottom, transparent, black), url(img-2.png);
width: 100%;
height: 70vh;
background-size: cover;
position: relative;
border: 1 px solid black;
background-attachment: fixed;
}
.hero-text{
color: white;
position: absolute;
bottom: 5px;
left: 2%;
flex-wrap: none;
}
<div class="hero-image">
<h1 class="hero-text">From Streets to Discord: <span class=italic>How Nepal’s Gen Z Toppled a Government </span></h1>
<h2 class="hero-text"><i class="fa-solid fa-circle-user"></i> Amish Raj Mulmi</h2>
<h3 class="hero-text">SEPTEMBER 24, 2025 | Carnegie Endowment for International Peace</h3>
</div>
