I've been tackling the alignment of elements in my menu header, but for some reason, they're not lining up horizontally as intended. Instead, they are stacked below each other. Here's the link to my jsfiddle
Here's a snippet of my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-content">
<li><a href="#"><i>INDIVIDUAL</i></a>
</li>
<li><a href="#"><i>CORPORATE</i></a>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
And this is how I styled it using CSS:
@font-face {
font-family: AvantGarde Demi;
src: url(AvantGarde Demi.woff);
}
@font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
@font-face {
font-family: ITC Avant Garde Gothic;
src: url(ITC Avant Garde Gothic.woff);
}
.topnav {
background-color: #333;
overflow: hidden;
padding: 0 10px;
}
.topnav > img,
nav {
display: inline-block;
vertical-align: middle;
}
/* Other CSS styles... */
I'm looking to align everything in the menu header horizontally on one line. For reference, please check out this image, which gives an idea of the desired layout on a black background.