Писал простой блог. Ошибка в том что когда добавляю тег nav и пишу стили для него, то стили применяются и к header. Объясните почему.
@import url('https://fonts.googleapis.com/css?family=Suez+One');
* {
margin: 0;
padding: 0;
outline: none;
}
body,
html {
width: 100%;
height: 100%;
}
body {
background-color: #fcfcfc;
font-family: cursive;
}
header {
width: 100%;
padding: 10px 0.5% 10px 0%;
background-color: #343434;
float: left;
line-height: 35px;
border-bottom: 2px solid silver;
}
header #logo {
cursor: pointer;
float: left;
width: 85%;
}
header #logo span {
font-size: 1.7em;
margin-left: 40px;
font-family: 'Suez One', serif;
color: #fff;
}
header #auth>a {
border-radius: 5px;
padding: 5px 9px;
text-decoration: none;
color: #fff;
background-color: #8c8c8c;
border-bottom: 2px solid #b3b3b3;
}
header #auth>a:not(:last-child) {
margin-right: 10px;
}
header #auth>a:hover {
border-bottom: 1px solid #b3b3b3;
line-height: none;
}
nav {
width: 100%;
background-color: #fff;
margin-top: 100px;
}
<header>
<div id="logo">
<span>My Blog</span>
</div>
<div id="auth">
<a href="#">Sign Up</a>
<a href="#">Login</a>
</div>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Contact me</a>
<a href="#">About me</a>
</nav>