Некоторые из моих ссылок не будут взаимодействовать, когда я нажимаю на них

Question

Я сделал этот сайт для школьного задания, и все это прошло безупречно, пока .. это не произошло . Я пытаюсь навести курсор на кнопку Home и News на панели навигации, но она не работает, и, кажется, ничего не происходит, когда я пытаюсь нажать на них, Contacts и кнопка About работают нормально.

body {
  margin: 0;
  background-image: url("https://ak2.picdn.net/shutterstock/videos/4550942/thumb/1.jpg");
  background-position: center;
  background-size: cover;
}

.title {
  color: black;
  background-color: #ad8961;
  width: 70%;
  height: calc(15vh);
  font-size: calc(10vh);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow';
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 0.6%;
}

.bar {
  position: relative;
  background-color: #04406d;
  width: 70%;
  height: 60px;
  text-align: center;
  margin-top: -1%;
  margin-right: 15%;
  margin-left: 15%;
}

.home {
  position: relative;
  color: black;
  font-size: 22px;
  margin-left: -87%;
  top: 25%;
}

.news {
  position: relative;
  color: black;
  font-size: 22px;
  margin-left: -66%;
  top: -17%;
}

.contacts {
  position: relative;
  color: black;
  font-size: 22px;
  margin-left: -41%;
  top: -60%;
}

.about {
  position: relative;
  color: black;
  font-size: 22px;
  margin-left: 90%;
  top: -104%;
}

.box {
  background-color: #ad8961;
  width: 70%;
  height: calc(76.5vh);
  text-align: center;
  color: black;
  margin-top: -1.7%;
  margin-right: 15%;
  margin-left: 15%;
}

.boxtext {
  background: white;
  margin-left: 10%;
  margin-right: 10%;
}

a:hover {
  background-color: darkblue;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

<div class="title">Sample Text</div>
<div class="bar">
  <div class="home"><a href="#home">Home</a></div>
  <div class="news"><a href="#news">News</a></div>
  <div class="contacts"><a href="#contacts">Contacts</a></div>
  <div class="about"><a href="#about">About</a></div>
</div>
<div class="box">
  <div class="boxtext">
    <h1><strong>Lorem Ipsum</strong></h1>
    <p></p>
  </div>
</div>

Любые предложения о том, почему это происходит?