填充弄乱了flexbox的对齐方式

Question

我试图在页面的右上角有两个项目作为链接。 我在codepen上发布了我的代码，作为一个直观示例。每当我为访问按钮添加填充时，页面上都会出现关于。

CSS：

   .navigation {
     display: flex;
     justify-content: space-between;
     align-content: center;
     &-list {
     display: flex;
     align-self: center;
     list-style: none;
     font-size: 2rem;
    }
   &-item {



        &-visit {
       background-color: $color-tertiary;
       padding: 2rem;
         }
     }
  }

HTML：

       <div class="container">
       <navigation class="navigation">
        <h1 class="porto">Porto</h1>
        <ul class="navigation-list">
         <li class="navigation-item">About</li>
          <li class="navigation-item navigation-item-visit">Visit</li>
       </ul>
      </navigation>

   </div>

Answer 1

尝试删除height中的&-item和padding-bottom中的&-visit。