メニュー項目はわずかに傾いていますか？

Question

私はメニューを構築していて、最後の項目「今すぐ予約」は少し傾いています（押し下げる）。私がしたのは、境界線を追加することだけでした。これは、完全な水平方向の配置を破るようです。これを修正する方法はありますか？

Codepen

HTML：

<div class="navibar"> 
    <a class="logo" href="#">Logo</a> 

    <ul class="left-bar"> 
     <li> 
     <a href="#">ACCOMMODATIONS</a> 
     </li> 
     <li> 
     <a href="#">DINING</a> 
     </li> 
     <li> 
     <a href="#">SPA & WELLNESS</a> 
     </li> 
      <li> 
     <a href="#">MEETINGS & EVENTS</a> 
     </li> 
     <li> 
     <a href="#">ADVENTURES</a> 
     </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; 
    } 

私は間違っているかもしれないが、私は国境がパディングやマージンを追加しないかなり確信しています。

フィラーテキストなぜスタックオーバーフローは、私はより多くのテキストが必要だと言います。本当にそう？それらが揃ったボーダーが、2ピクセルの境界線は2ピクセルで要素を押し下げる前に

Answer 1

単に負の境界線の幅

.btn-ghost:link, .btn-ghost:visited { 
    border: 2px solid #fff; 
    margin-top: -2px; 
    color: #fff; 
} 

でマージントップを使用します。あなたが好きな場合は、アイテムを上に移動するか、目に見えないボーダーや余白を他のアイテムに追加することができます