当我按某些链接时，它们不会交互

Question

我把这个网站用于学校作业，一切都进行得很顺利，直到.. 发生了。我尝试将鼠标悬停在导航栏中的 Home 和 News 按钮上，但是它不起作用，当我尝试按它们时，似乎没有任何反应，联系人和关于按钮似乎可以正常工作。

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>

关于为什么发生这种情况的任何建议吗？