CSS - aligning H1 with a span symbol - html

Question

I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>

Answer 1

Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>

Answer 2

You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>