Пишу сайт на чистом css ну как пишу пытаюсь почему h1 уходит куда то вниз?
<html>
<head>
<meta charset = "utf-8">
<title>My site.</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<nav>
<div id = "div">
<h1>Site.io</h1>
</div>
<ul>
<li><a href = "/">Home</a></li>
<li><a href = "/">About us</a></li>
<li><a href = "/">Contacts</a></li>
</ul>
</nav>
</body>
</html>
nav{
width: 960px;
margin: 0 auto;
}
nav:before{
content: "";
display: block;
height: 50px;
width: 100%;
background:#000;
position: absolute;
left: 0;
z-index: -1;
}
ul{
margin: 0;
padding: 0;
list-style: none;
height: 50px;
float: right;
}
ul li{
float: left;
}
ul li a{
color: #fff;
display: block;
height: 50px;
padding: 0 30px;
text-transform: uppercase;
text-decoration: none;
line-height: 50px;
}
ul li a:hover{
color: #d34d43;
}
#div{
margin: 0;
padding: 0;
list-style: none;
height: 50px;
float: left;
position: absolute;
}
h1{
color: #fff;
display: block;
height: 50px;
text-transform: uppercase;
line-height: 50px;
float: left;
}