Turning H1 Heading Into 3 Separate Lines Instead of 2 - html

Question

Newbie here, I'm trying to figure out how to do this:
3 Lined H1
Right now, I have this:
2 Lined H1
I know that I could probably achieve this by doing 3 H1's in HTML
<h1> Learn How To Build An </h1>
<h1> EPIC </h1>
<h1> Battlestation Setup </h1>
But the problem with that is that now there are 3 H1's which isn't good for SEO.
Right now the code I have to achieve the 2 lines is:
HTML:
<div class="hero">
<div class="container">
<div class="left-col-cta">
<p class="subheading">Whether You Need It For Work Or Gaming...</p>
<h1>Learn How To Build An <span>EPIC</span> Battlestation Setup</h1>
Buying Guides
Info Guides
</div>
</div>
CSS
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../Images/Hero/hero-background.jpg");
width: 100%;
height: 70vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
font-family: 'Poppins', sans-serif;
.left-col-cta {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
.subheading {
color: rgb(158, 158, 158);
text-transform: uppercase;
font-weight: bold;
}
h1 {
font-size: 2.5em;
padding: 0 100px;
}
}
I do have a span there for the 'EPIC' but I don't know what I would need to Google to achieve the result.
How would I go about putting the 'EPIC' in the center and then the 'Battlestation Setup' underneath it?
Thanks!

Answer 1

One option for this:
Instead of span, put a br(new line) and center each line of text.
<div class="hero">
<div class="container">
<div class="left-col-cta">
<p class="subheading">Whether You Need It For Work Or Gaming...</p>
<h1>Learn How To Build An <br/>EPIC<br/> Battlestation Setup</h1>
Buying Guides
Info Guides
</div>
</div>