Hover does not cover whole text - html

Question

I have a menubar in the top left corner, but the hover and the active element does not cover the whole text. I'm very new to this, and the page is not done, so no need to point out how bad it looks haha. The whole page is in norwegian, so it can be a little confusing. It is supposed to be a type of movie register, and I know its probably alot of mistakes in my code, but the problem I'm trying to figure out right now is the hover and active:)
Here is my html:
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>
<!-- end snippet -->
And css:
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top:0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
font-size: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #808080;
}
.first li {
display: inline-block;
}
li a {
display:block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor:pointer;
font-size: 16px;
}
li a:hover {
background-color:#333333;
}
.active {
background-color:#333333;
}
/* LOG IN*/
form {
float:right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input{
font-size: 90%;
}

Answer 1

You should delete space between li elements like this
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li><li>Mine lån
</li><li>Min liste</li>
</ul>
it's something like bug with space between li elements and also div if they are typed on new line.(I am sorry if explained something wrongly).

Answer 2

html
/*FLEXBOX*/
{
font-family: "Arsenal", "Times New Roman";
}
body {
background: #333333;
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background: #999999;
height: 50px;
padding-right: 100px;
}
/*SISTE LÅNTE*/
main {
display: flex;
justify-content: space-around;
align-items: center;
}
.main {
background: #999999;
flex-grow: 1;
order: 2;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.main h5 {
padding-left: 10px;
}
/*TILGJENGELIGE FILMER*/
.left {
background: #999999;
flex-grow: 1;
order: 1;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left h5 {
padding-left: 10px;
}
/*ANBEFALINGER*/
.right {
background: #999999;
flex-grow: 1;
order: 3;
margin: 20px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.left,
.right,
.main {
margin: 20px 20px;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
.right h5 {
padding-left: 10px;
}
/*RUTINER*/
footer {
background: #999999;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 155px;
margin: 20px;
margin-top: 0px;
padding: 10px;
color: white;
border-style: solid;
border-color: black;
border-width: 5px 5px 5px 5px;
}
/*MENUBAR*/
#nav {
background-color: #999999;
position: absolute;
top: 0px;
padding-left: 85px;
height: 50px;
overflow: hidden;
margin-top: -5px;
left: -90px;
}
ul {
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
.first li {
display: inline-block;
}
li a {
display: inline-block;
text-decoration: none;
text-align: center;
padding: 15px 20px;
color: white;
cursor: pointer;
}
li a:hover {
background-color: #ddd;
}
li a:active {
background-color: #ccc;
}
/* LOG IN*/
form {
float: right;
font-family: Arial, Helvetica, sans-serif;
}
.login {
position: absolute;
top: 10px;
right: 25px;
font-size: 50%;
display: inline-block;
}
input {
font-size: 90%;
}
/*ALLE FILMER*/
.movie1 {
display: flex;
}
.movie1 img {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
<link rel="stylesheet" href="Startside.css" type="text/css">
<title>Filmregister</title>
</head>
<body>
<header>
<h2>Filmregister</h2>
<!--MENUBAR-->
<div id="nav">
<ul class="first">
<li><a class="active" href="startside.html">Startside</a>
</li>
<li>Mine lån
</li>
<li>Min liste
</li>
</ul>
</div>
</header>
<!--SISTE LÅNTE-->
<main>
<div class="main">
<h5>Siste lånte</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/MinorityReport.html">
<img src="MinorityReport3.jpg" width="100" height="140" alt="MinorityReport">
</a>
<small>
<br>
Utgitt: 2002
<br>
Steven Spielberg
<br>
Sci-fi
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--TILGJENGELIGE FILMER-->
<div class="left">
<h5>Tilgjengelige filmer</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Lunchbox.html?E-postadresse=">
<img src="TheLunchbox1.jpg" width="100" height="140" alt="The-Lunchbox">
</a>
<small>
<br>
Utgitt: 2013
<br>
Ritesh Batra
<br>
Romanse, komedie
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
<!--ANBEFALINGER-->
<div class="right">
<h5>Anbefalinger</h5>
<div class="movies">
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html">
<img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables">
</a>
<small>
<br>
Utgitt: 2011
<br>
Olivier Nakache / Eric Toledano
<br>
Drama, biografi, komedie
<br>
Film(dvd-video)
</small>
</div>
<div class="movie1">
<a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html">
<img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie">
</a>
<small>
<br>
Utgitt: 2008
<br>
Bryan Singer
<br>
Krig
<br>
Film(dvd-video)
</small>
</div>
</div>
</div>
</main>
<!--RUTINER-->
<footer>
<strong>Rutiner</strong>
<ul id="rutiner">
<br>
<li> <small> 1. Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt.</small>
</li>
<li> <small> 2. Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.</small>
</li>
<li><small> 3. Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.</small>
</li>
<li> <small> 4. For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. </small>
</li>
<li> <small> 5. Film skal leveres tilbake i posthyllen merket retur av film.</small>
</li>
</ul>
</footer>
<!-- LOGIN -->
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</body>
</html>

Answer 3

Adding a width and a height property to the anchor element should fix it:
li a { width: auto; height: auto; }
Hover effect:
li a:hover { color: #999; }
Note: the active effect is triggered whenever you click on the element. So, it won't produce any effect after the page has been reloaded.