Navbar only start and end links working HTML - html

Question

So I have a header with a navbar and some links like this.
When I hover on a link I have a border around it that looks like this.
Now only the HOME and CONTACT links are working and showing the cursors as a pointer and displaying the borders on hover but the other four aren't working or even showing a cursor to indicate that it's a link. How to fix this? Thanks.
Here's my header code:
<header>
<div class="navbar" id="navbar">
<div class="link" id="link">
HOME
</div>
<div class="link" id="link">
ABOUT
</div>
<div class="link" id="link">
OUR SERVICES
</div>
<div class="link" id="link">
PORTFOLIO
</div>
<div class="link" id="link">
CLIENT ALBUMS
</div>
<div class="link" id="link">
CONTACT
</div>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>
</header>
And here's my CSS:
#media screen and (min-width: 600px) {
header > .navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
padding-top: 1.2em;
margin-left: 3em;
margin-right: 3em;
}
#link {
text-align: center;
margin-left: calc(5px + 1vw);
padding: .5em;
border: 2px solid white;
}
#link:hover {
transition: .5s;
border: 2px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
}
It doesn't work even though I already changed from classes to ids.
Here's my Jquery code but I don't think this is really relevant for this problem.
$(document).ready(function() {
var navbar = $("#navbar")
var showNavs = $("#showNavs")
$("#showNavs").click(function() {
navbar.toggle("slow")
})
var form = $("#contact-form")
var firstName = form.find("#firstName")
var lastName = form.find("#lastName")
var textarea = form.find("#textarea")
form.submit(function(e) {
e.preventDefault();
firstName.val('')
lastName.val('')
textarea.val('')
})
var newsletterForm = $("#newsletter-form")
newsletterForm.submit(function(e) {
e.preventDefault();
$(this).find("#email").val('')
})
})
Here's a full demo of my site.
Wedding Planner Website
The links are working fine when the browser isn't resized.

Answer 1

To Change the cursor to a pointer when you hover over something element add The Following In Your Styles:
cursor: pointer;
this will work regardless of the element when a user hovers over the element.
If It Works Please Mark As Correct!
Kamestart
(If It Does Not Work Please Share Your Code And Write In The Comments. It Will Help A lot.)
Edit: It Wont Work. If You Want To Stay On The Same Fir Testing Purposes Use # in the href attr. if it is empty it will not be recognised as a link.

Answer 2

I suggest you wrap your div's with anchor tag so the whole box will be clickable and also I looked at your site, there's a class="text-container" which is overlapping your Navbar when the window is resized, hope you'll know the reason now.
.navbar{
display:flex;
justify-content: space-evenly;
}
<header>
<div class="navbar" id="navbar">
<a href="">
<div class="link" id="link">
HOME
</div>
</a>
<a href="#about">
<div class="link" id="link">
ABOUT
</div>
</a>
<a href="">
<div class="link" id="link">
OUR SERVICES
</div>
</a>
<a href="#gallery">
<div class="link" id="link">
PORTFOLIO
</div>
</a>
<a href="">
<div class="link" id="link">
CLIENT ALBUMS
</div>
</a>
<a href="#contact">
<div class="link" id="link">
CONTACT
</div>
</a>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>