Kann mir jemand sagen, warum bei dem folgendem Code mein li a Elemente aus der Nav nicht einen weißen Kasten um sich herrum bekommen wenn ich darüber hover? Also ich habe jetzt tausend mal nachgeguckt und weiß nicht woran es liegt.
<!DOCTYPE html>
<html>
<head>
<title>Test-Website</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
* {margin: 0; padding: 0;}
header{background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(pic1.jpg); height: 100vh; background-size: cover; background-position: center; background-attachment: fixed;}
.main-nav{float: right; list-style: none; margin-top: 30px;}
.main-nav li{display: inline-block;}
.main-nav li a{color: white; text-decoration: none; padding: 5px 20px; font-family: "Roboto", sans-serif; font-size: 25px;}
.main-nav li.active a{border: 1px solid white;}
.main-nav li a:hover{border: 1px solid white;}
.logo img{width: 150px; height: auto; float: left;}
body{ font-family: monospace;}
.row{max-width: 1500px; margin: auto;}
.hero{position: absolute; width: 1900px; margin-left: 0; margin-top: 0;}
h1{color:white;text-transform: uppercase; font-size: 70px; text-align: center; margin-top: 275px;}
.button{margin-top: 30px;margin-left:782px;}
.btn{border: 1px solid white; padding: 10px 30px; color:white; text-decoration: none; margin-right: 5px; font-size: 25px; text-transform: uppercase;}
.btn-one{background-color: darkorange; font-family: "roboto", sans-serif;}
.btn-two{font-family: "Roboto", sans-serif;}
.btn-two:hover{background-color:darkorange; transition: all 0.5s ease-in;}
.about{height: 100vh;}
</style>
</head>
<body>
<!--HEADER-->
<header>
<!--NAVIGATION-->
<div class="row">
<div class="logo"><img src="logo.png" alt="Logo"></div>
<ul class="main-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="google.com">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">EXERCISES</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!--MESSAGE-->
<div class="hero"><h1>Are You Ready?</h1><div class="button"><a href="#" class="btn btn-one">Continue</a><a href="#" class="btn btn-two">Quit</a></div></div>
</header>
<!--ABOUT-->
<section class="about"><h2>Hallo dies ist ein Test</h2></section>
</body>
</html>