I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side.
Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h1 tag and utilizing spans, but the styling does not align properly when it comes to sizing and centering. My goal is to have the title centered on the screen, with the subtitle positioned directly underneath in the middle, rather than being left-aligned and placed next to each other.
header {
width: 100%;
height: 100vh;
background-image: url("underneath.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
padding-top: 15%;
color: rgb(240, 240, 240);
display: flex;
align-items: center;
justify-content: center;
}
.name {
font-size: 6em;
display: inline;
}
.subtitle {
display: inline;
}
<header>
<div class="wrapper">
<h1 class="name">Answer 42</h1>
<h2 class="subtitle">Customer Acquisitions</h2>
</div>
</header>
I am striving to design a page title with a subtitle aligned underneath, featuring a centered look above a background image specified in CSS. Presently, my code has the header tags arranged horizontally instead of vertically as desired.