I need assistance in creating a navigation bar for my website that includes multiple headers with links. I am not sure if the issue lies within my CSS, HTML, or both. Can someone please help me troubleshoot?
index.html
<!DOCTYPE html>
<html>
<head>
<title>WalletPro</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div id="navbar">
<nav>
<div id="main-head">
<h1> <a href="index.html"> Home </a></h1>
</div>
<div id="login"><a href="login.html"> login</a>
</div>
</nav>
</div>
</header>
</body>
</html>
style.css
*{
margin: 0px;
padding: 0px;
}
#navbar{
display: inline;
}
#navbar{
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: #f011f0;
}
#test {
color: pink;
text-emphasis: none;
}