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