htmlcsspaddingnav

A padding issue when creating a navigation bar


I have just started HTML and CSS, and I want to make a navigation bar. I ran into a problem where each of my links has this weird padding under it when I hover over the links, as shown in pictures. Are there any ways to fix the issue without deleting the padding?

Picture 1 Picture 2

Browser: Microsoft Edge 126.0.2592.87

h1 {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #131842;
}

.navbar a {
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 8px;
}

.navbar a:hover {
  background-color: #405D72;
}
<header>
  <nav class="navbar">
    <ul>
      <li><a href="home.html">Home</li>
      <li><a href="projects.html">Projects</li>
      <li><a href="about.html">About</li>
    </ul>
  </nav>
</header>

I was following this video and was expecting a similar result shown in the video.

https://www.youtube.com/watch?v=f3uCSh6LIY0&t=232s

The navbar in the video:

The nav bar in the video


Solution

  • Don't forget to add your </a>closing tag. Here's a markup validator to let you check your future works - https://validator.w3.org/

    h1 {
      text-align: center;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: normal;
    }
    
    .navbar ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #131842;
    }
    
    .navbar a {
      color: white;
      text-decoration: none;
      display: block;
      text-align: center;
      padding: 8px;
    }
    
    .navbar a:hover {
      background-color: #405D72;
    }
    <header>
      <nav class="navbar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </header>