Menu item slightly off tilt? - html

Question

I am building a menu, and the last item 'Book Now' is slightly off tilt (pushing down). All i did is add a border, which seems to break the perfect horizontal alignment. Is there any way to fix this?
Codepen
HTML:
<div class="navibar">
<a class="logo" href="#">Logo</a>
<ul class="left-bar">
<li>
ACCOMMODATIONS
</li>
<li>
DINING
</li>
<li>
SPA & WELLNESS
</li>
<li>
MEETINGS & EVENTS
</li>
<li>
ADVENTURES
</li>
</ul>
<ul class="right-bar">
<li>
<a class="btn btn-ghost" href="#">BOOK NOW</a>
</li>
</ul>
<div style="clear:both"></div>
</div>
CSS:
* {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.navibar {
margin: 0 auto;;
width: 1100px;
background: rgba(18, 23, 26, 0.4);
padding: 20px;
}
.navibar li a {
color: white;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
.logo {
float:left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-right: 100px;
}
.navibar li {
float: left;
}
.left-bar {
float: left;
}
.right-bar {
float: right;
}
.btn:link,
/*Prevents color change when clicked */
.btn:visited {
/*<a> is a inline element which doesn't allow padding, so need to change to inline-block */
/* 10 on top and bottom and 30 left and right */
font-weight: 300;
word-spacing: 3px;
font-family: brandon-grotesque;
text-decoration: none;
/*Takes away line on bottom of words */
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link, .btn-full:visited {
background-color: #fff;
/* From flat UI colors */
border: 1px solid #fff;
color: #fff;
margin-right: 10px;
}
.btn-ghost:link, .btn-ghost:visited {
border: 2px solid #fff;
color: #fff;
}
I might be wrong, but I am pretty sure Borders don't add padding or margin.
Filler text because Stack Overflow says I need more text. Really SO?

Answer 1

Simply use margin-top with negative border width
.btn-ghost:link, .btn-ghost:visited {
border: 2px solid #fff;
margin-top: -2px;
color: #fff;
}
Before the border they were aligned but the 2px border pushes the element down by 2px. You can move the item up or add an invisible border or margin to the other items if you like