CSS border not bind

Question

I'm trying to make the following menu bar

And the truth is that my result is as follows:

My main problem is I do not know how to make the side edge reaches the top of the layer, the CSS and HTML code I am using is as follows:

HTML

<div id="header" class="row">
    <div class="col-md-12">
 <nav>
    <ul class="actions">
      <li class="header_nav">
         <a href="#">Iniciar Sesi&oacute;n</a>
      </li>
     <li class="header_nav notifications">
       <a href="#"></a>
     </li>
    <li class="header_nav like">
       <a href="#"></a>
    </li>
    <li class="header_nav history">
       <a href="#"></a>
    </li>
 </ul>
  </nav>
</div>
</div>

CSS

.actions a:before{ 
content: "";
float: left;
width: 20px;
height: 19px;
margin: 0 5px 0 0;
background: url(../img/menu.png);
}

.history a:hover:before,
.history a:focus:before,
.history a:active:before {
    background-position: 40px -22px;
    }

.history a:before { background-position: 40px 0; }

.notifications a:hover:before,
.notifications a:focus:before,
.notifications a:active:before {
    background-position: 0 -22px;
    }

.notifications a:before { background-position: 0 0; }

.like a:hover:before,
.like a:focus:before,
.like a:active:before {
    background-position: 20px -22px;
    }

.like a:before { background-position: 20px 0; }

#header{
    border-bottom: 1px solid #999;
}

nav{
    padding-top: 10px;
}

nav li{
    list-style: none;
    display: inline;
}

li{
    border-right: 1px solid #999;
}

thanks for everything!

Answer 1

Make the following changes:

nav li {
list-style: none;
display: inline;
float: left;
padding: 10px;
height: 42x; // for 1px difference to the bottom
}

And this if you don't want so empty space to the left:

.row {
margin-left: -60px;
margin-right: -15px;
}