My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjustments do I need to make in order to have my H1 centered within the banner div like this example? Link
If you want to view the code on Jfiddle, here's the link: Jfiddle
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: sans-serif;
}
.banner {
width: 100%;
background-color: #8F3144;
height: 300px;
top: 0px;
}
/* LOGO START*/
.banner>img {
float: left;
height: 103px;
width: 140px;
color: black;
}
/* LOGO END */
.mainh1 {
font-weight: bolder;
text-align: center;
padding-top: 80px;
color: #ffffff;
font-size: 50px;
}
.nav {
list-style: none;
text-align: right;
margin: 0;
}
.nav>li {
display: inline-block;
font-size: 20px;
margin-right: 20px;
padding-top: 20px;
font-weight: bolder;
}
.nav>li>a {
text-decoration: none;
color: #ffffff;
}
.nav>li>a:hover {
opacity: .5;
}<div class="banner">
<img src="logo.png" alt="logo" />
<ul class="nav">
<li class="meetsli"><a href="#">Meets</a></li>
<li class="aboutli"><a href="">Gallery</a></li>
</ul>
<h1 class="mainh1">Harrison TEST TEST TEST TEST</h1>
</div>
</div>