悬停时导航栏项目突出显示不正确（移动版）

Question

除了教程中的一些代码之外，我还使用自己的代码构建了响应式导航，并且遇到了两个问题。

1a.我似乎无法将导航栏固定在身体上方，因为我一直看到导航栏上方有一点空间。 （编辑：此问题已得到修复，从而导致另一个问题）

navbar-gap

1b。当屏幕小于 500 像素时，我使用了底部扩展导航栏。如何确保当导航栏扩展到底部（显示所有菜单项）时，以下正文始终进行相应调整，以便所有内容在导航栏下方保持可见（参见屏幕截图）。

2. 包含链接动画的导航栏预计宽度大于 500 像素。我还为 500px 以下的屏幕添加了一些链接动画。它确实有效，但是，我无法将突出显示（导航栏项目下方的红线）保持为项目的大小。

突出显示的导航栏项目

HTML 标头部分：

<header>
    <a href="index.html">
      <img src="./img/personal_logo_icon.svg" alt="Personal logo" class="logo">
    </a>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul class="topbottombordersout">
        <li>
          <a href="index.html">HOME</a>
        </li>
        <li>
          <a href="about.html">ABOUT ME</a>
        </li>
        <li>
          <a href="portfolio.html">PORTFOLIO</a>
        </li>
        <li>
          <a href="contact.html">CONTACT</a>
        </li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>

这是 500px 以下屏幕的代码：

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  background-color: var(--primary-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--line-height);
  font-weight: 400;
}

header {
  background-color: var(--text-color);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

.logo {
  color: var(--primary-color);
  /* margin: 0; */
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
   display: block;
   background: var(--primary-color);
   height: 2px;
   width: 2em;
   border-radius: 2px;
   position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  background-color: var(--text-color);
  width: 100%;
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  transform: scale(1,0);
  transform-origin:top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

/* ------ Start: Navigation link colors ------ */

nav a {
  color: var(--primary-color);
  font-family: var(--body-font-family);
  text-decoration: none;
  font-size: var(--h3-font-size);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:visited {
  color: var(--primary-color);
}

nav a:active {
  color: var(--accent-color);
}

/* ------ End: Navigation link colors ------ */

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

nav a::before {
    content: '';
    display: block;
    height: 1.5px;
    background: var(--animation-navbar-links);
    position: relative;
    bottom: -1.5em;
    left: 0;
    right: 0;
    transform: scale(0,1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1,1);
  }

这是500px 以上屏幕的代码：

@media screen and (min-width: 500px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(800px, 3fr) 1fr;
  }

  .logo {
    grid-column: 2 / 3;
  }

  nav {
    all: unset;
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  .topbottombordersout a:before, .topbottombordersout a:after {
      background: var(--animation-navbar-links);
      position: absolute;
      left: 0px;
      width: 100%;
      height: 2px;
      content: "";
      opacity: 0;
      transition: all 0.3s;
  }

  .topbottombordersout a:before {
      top: 0px;
      transform: translateY(10px);
  }

  .topbottombordersout a:after {
      bottom: 0px;
      transform: translateY(-10px);
  }

  .topbottombordersout a:hover:before, .topbottombordersout a:hover:after {
      opacity: 1;
      transform: translateY(0px);
  }
}

对于在此发布的任何错误做法，我提前表示歉意。我确实浏览了所有文档，但由于这是我的第一篇文章，我不能说我是否一切都正确。我也刚刚开始进行网络开发。

预先感谢您的任何帮助！