H2 element won't position below H1.
Currently working on a client's website and facing an issue with the alignment of elements in the navbar. The desired layout includes having an icon on the left, followed by H1 to the right of the icon, and finally H2 beneath H1. I have successfully implemented the first two parts but struggling to make the H2 move under H1. Any suggestions or tips to resolve this problem would be highly appreciated.
#header-nav {
width: 100%;
background-color: #3985BA;
border-radius: 0;
border: 0;
}
#logo {
background: url('../images/piano.png') no-repeat;
width: 200px;
height: 200px;
}
.navbar-brand {
padding-top: 25px;
text-align: center;
}
.navbar-brand h1 {
text-transform: uppercase;
font-family: bebas-neue, sans-serif;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand span {
text-transform: uppercase;
color: #A7D8DC;
margin-top: 15px;
font-weight: 600;
}
.navbar-brand a:hover,.navbar-brand a:focus {
color: #04292C;
text-decoration: none;
}
#header1 {
color: green;
} <header>
<nav id='header-nav' class='navbar navbar-default'>
<div class='container'>
<div class='navbar-header'>
<a href="index.html" class='float-left'>
<div class='d-none d-sm-none d-md-none d-lg-block d-xl-block' id='logo' alt='piano logo'></div>
</a>
<div class='navbar-brand'>
<a href='index.html' class='float-left' id='header1'><h1>Sandra's Studio</h1></a>
<p>
<span id='header2'>Cumming, GA</span>
</p>
</div>
</div>
</div>
</nav>
</header>