Navbar items highlighted incorrectly when hovering (mobile version)

I´ve build a responsive navigation using my own code in addition to some code from a tutorial and I have come across two issues.

1a. I can´t seem to get the navbar fixed above the body as I keep seeing a little space above the navbar. (Edit: this issue has been fixed, which resulted in another one)

navbar-gap

1b. I have used an expanding navbar to the bottom when the screen is smaller than 500px. How can I make sure that when the navbar is expanded to the bottom (showing all menu items), the following body always adjusts accordingly, so that all content stays visible underneath the navbar (see screenshot).

2. The navbar including link animation works expected for a width of above 500px. I have also added some link animation for the screen below 500px. It does work, however, I am not able to keep the highlight (red line below navbar item) to the size of the item.

highlighted navbar items

The HTML header section:

<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>

Here is the code for screens below 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);
  }

Here is the code for screens above 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);
  }
}

I do apologize in advance for any wrong practices for posting here. I did go through all the documentation, but since it´s my first post I can´t say whether I got everything right or not. Also I have just started out with web development.

Thanks in advance for any help!