Html 菜单项稍微倾斜？

我正在制作菜单，最后一项“BookNow”稍微倾斜（向下推）。我所做的只是添加了一个边框，这似乎打破了完美的水平对齐。有办法解决这个问题吗

HTML:

CSS:

*{
列表样式：无；
边际：0px；
填充：0px；
文字装饰：无；
}
纳维巴先生{
保证金：0自动；；
宽度：1100px；
背景：rgba（18,23,26,0.4）；
填充：20px；
}
李娜先生{
颜色：白色；
显示：内联块；
垫面：5px；
垫底：5px；
左侧填充：20px；
右边填充：20px；
}
.标志{
浮动：左；
垫面：5px；
垫底：5px；
左侧填充：10px；
右边填充：10px；
右边填充：100px；
}
李先生{
浮动：左；
}
.左栏{
浮动：左；
}
.右栏{
浮动：对；
}
.btn:link，
/*防止单击时更改颜色*/
.btn:已访问{
/*是不允许填充的内联元素，因此需要更改为内联块*/
/*上下各10个，左右各30个*/
字体大小：300；
字距：3px；
字体系列：布兰登怪诞；
文字装饰：无；
/*去掉单词底部的一行*/
过渡：背景色0.2s，边框0.2s，颜色0.2s；
/*使颜色发生微妙变化，而不是瞬间变化。更多应用*/
}
.btn已满：链接，.btn已满：已访问{
背景色：#fff；
/*从平面UI颜色*/
边框：1px实心#fff；
颜色：#fff；
右边距：10px；
}
.btn重影：链接.btn重影：已访问{
边框：2倍实心#fff；
颜色：#fff；
}

我可能错了，但我很确定边框不会添加填充或边距

---

填充文本，因为堆栈溢出表示我需要更多文本。真的吗？

只需使用带负边框宽度的边距顶部

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

---

在边框之前，它们是对齐的，但是2px边框将元素向下推2px。如果您愿意，您可以向上移动项目或在其他项目中添加不可见的边框或边距

不客气，但如果这有帮助，请将问题标记为已回答。您的代码笔示例看起来不错……我缺少什么？

  * {
      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;
    }

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