Menu divider is not occupying full height of the menu

Question

I have a menu and I want to have a vertical divider between Item 2 and Item 3. But Im not having success doing this because the divider is not occupying the full height of the menu and the menu items are not staying vertical aligned with the divider.

Also if you know how to have the logo aligned vertically with the menu items it would be nice because it is also not staying, the menu it's a bit more above the logo.

Menu html:

<header class="header container">
    <div class="content">
        <h1 class="main_logo fl-left"><a href="">LOGO</a></h1>
        <ul class="nav fl-right">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li class="separator"></li>
            <li><a href="">Item 3</a></li>
            <li><a  class="btn" href="">Item 4</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</header>
<div class="container">
    <section class="section">Test</section>
</div>

The working example is here: https://jsfiddle.net/5rjdofu7/

Answer 1

You need a line-height to align the stuffs. So, adding the following CSS will make the logo and <ul> align middle vertically. Also, you have too much padding, which if you don't need, you have to get rid of.

h1, ul {
  line-height: 100px;
}

Preview

If this is what you are expecting: