How to fix an hover property not spanning on the whole grid element?

I am using CSS grid for my navigation bar, but I get a bug when coding the hover on the links... The change of background colour does not spread on the entire grid element.

I have used the property align-self: stretch to fix this, but this still does not work...

Here is the header HTML:

<body>
<header>
    <a href="./index.html" title="Welcome" class="logo"><img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px"></a>
    <nav>
        <a href="./index.html" title="Welcome" class="welcome active">Welcome</a>
        <a href="./about.html" title="About" class="about">About</a>
        <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
        <a href="./events.html" title="Events" class="events">Events</a>
    </nav>
</header>
</body>

Here is the CSS:

header {
    display: grid;
    grid-template-columns: auto 1fr;
}

nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: center;
    align-content: center;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color: var(--neonpink);
}

nav a:hover {
    background: var(--yellow);
    align-self: stretch;
    justify-self: stretch;
    text-align: center;
}

It almost work, except that just 2 lines, one on top, one under the link, remain turquoise...enter image description here

Solution

It's the alignment you have in the nav element...that seems off.

Try it on the link instead

header {
  display: grid;
  grid-template-columns: auto 1fr;
}

img {
  display: block;
}

nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: red;
  background: #000;
  border: 1px solid green;
}

nav a:hover {
  background: yellow;
}

<body>
  <header>
    <a href="#" title="Welcome" class="logo"><img src="http://www.fillmurray.com/g/140/100" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px"></a>
    <nav>
      <a href="./index.html" title="Welcome" class="welcome active">Welcome</a>
      <a href="./about.html" title="About" class="about">About</a>
      <a href="./artwork.html" title="Art Work" class="artwork">Art Work</a>
      <a href="./events.html" title="Events" class="events">Events</a>
    </nav>
  </header>
</body>