Woher kommt der Freiraum unter den roten Buttons bis zum Ende der grauen Leiste?
Html Code:
HTML
<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="logo_banner"><img src=""></div>
<nav>
<ul>
<li><a href="">Startseite</a></li>
<li><a href="">Büro</a></li>
<li><a href="">Projekte</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS Code:
Code
@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
header {
margin: 1rem 0 1rem 0;
width: 100%;
height: 11rem;
}
header #logo_banner {
background-color: #bebebe;
}
header #logo_banner img {
display: block;
margin: 0 auto;
}
nav {
padding:0;
background-color: #797979;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
nav ul li {
cursor: pointer;
float:left;
margin: 0;
background-color: brown;
min-width: 9.9rem;
transition: background-color 0.5s;
}
nav ul li a {
padding: 0;
margin: 0;
font-size: 1.6rem;
font-family: 'Lato', sans-serif;
font-weight: 100;
color: white;
text-decoration: none;
display: inline-block;
}
nav ul li:hover {
background-color:#000000;
}
