html - css：行高突破弯曲能力

Question

我在顶部导航栏中有以下html结构。 我在导航下面有一条黑线，在悬停时会发生变化。我使用scss并希望我的代码包含flexboxes。我几乎得到了预期的结果，但我有一个问题。当我调整窗口大小时，右侧菜单的行会中断 - 请参见图片附件。

导致这个问题，但无法克服它。 谢谢！

.main-nav {
  margin-right: get-vw(260px);
  margin-left: get-vw(260px);
  font-weight: bold;
  flex: 3;
  display: flex;
  justify-content: space-between;
  font-family: var(--nav-font);
  background-color: var(--logo-bg-color);
  color: var(--logo-color);
  max-width: get-vw(980px);
  height: get-vw(124px);
  font-size: rem(40px); 
  // border-bottom: 6px solid transparent; 
}

.logo {
  background-color: var(--logo-bg-color);
  span {
    color: var(--logo-dot-color);
    font-size: rem(40px);
  }
}

.right-menu {
  display: flex;
  a {
    font-size: rem(16px);
    transition: color 0.5s;
  }
  li {    
    box-sizing: content-box;
    text-align: center;
    display: list-item;
    width: rem(130px);
    max-height: rem(124px);
    border-bottom: rem(6px) solid #1e1e1e;
    line-height: get-vw(130px);
    margin-right: rem(1px);
    margin-left: rem(1px);    
    background-color: var(--logo-bg-color);   
    }
  li:hover {
    color: var(--logo-dot-color);
    border-bottom: rem(6px) solid rgb(88, 202, 56);    
  }
}
   
.right-menu {
  background-color: #1e1e1e;
  display: flex;
  text-align: center;
}

  <div class="nav-wrapper">
    <nav class="main-nav align-center">

      <ul class="clean-list logo">
        <li>
          <a>blogin<span>.</span></a>
        </li>
      </ul>

      <ul class="clean-list align-center right-menu">
        <li><a href="#">Journal</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

https://jsfiddle.net/jodos3vf/