Struggling to understand why there is a blank space between the image and the menu.
Here is the HTML and CSS related to it:
<header class="header_nav">
<img src="img/logo.png" class="logo"/>
<nav class="nav_bar">
<ul>
<li>Home</li>
<li>The Nest</li>
<li>Our Sparrows</li>
<li>Volunteer</li>
<li>Support</li>
<li>Contact</li>
</ul>
</nav>
</header>
body, html
{
width:100%;
min-height:100%;
margin:0;
border:0;
padding:0;
background-color: #F0EEE8;
}
.header_line
{
margin:0;
border:0;
padding:0;
position:absolute;
top:0;
height:20px;
width:100%;
background:#75B0A8;
border-bottom:5px solid white;
}
.header_nav
{
display:table;
margin:0;
border:0;
padding:0;
margin-right:10%;
margin-left:10%;
width:80%;
margin-top:35px;
height:83px;
}
.logo
{
display:table-cell;
margin:0;
border:0;
padding:0;
}
.nav_bar
{
display:table-cell;
margin:0;
border:0;
padding:0;
vertical-align:middle;
}
.nav_bar ul
{
margin:0;
border:0;
padding:0;
list-style:none;
}
.nav_bar ul li
{
margin:0;
border:0;
padding:0;
display:inline;
font-family:Georgia,serif;
font-size:20px;
}
No matter what I do, I can't seem to fix it. It seems like the issue might be due to using display:table and display:table-cell. If this method is not working, I need an alternative way to apply vertical-align:middle to the menu bar.
Any suggestions would be greatly appreciated!