I have just started HTML and CSS, and I want to make a navigation bar. I ran into a problem where each of my link has this weird padding under it, as shown in picture 1 and picture 2. Are there any ways to fix the issue without deleting the padding?
Thanks
Picture 1
Picture 2
*Browser: Microsoft Edge 126.0.2592.87
<html>
<head>
<meta charset="utf-8">
<title>Blank template</title>
<!-- Load external CSS styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
<h1>Yang Tri Phu</h1>
</body>
</html>
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;
}
I was following this video, and expected that the similar result in the video.
The nav bar in the video
New contributor
楊智富 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.