Потому что здесь ошибка )) Знающие поймут.
*{
margin: 0;
padding: 0;
}
html,body {
height:100%;
font-size: 100%;
width: 100%;
position: relative;
overflow-x:hidden;
}
body{
background: #eb2951;
}
a{
background: #02C851;
box-shadow: 2px 2px 10px #02C851;
}
a:hover{
border: 2px solid #02C851;
color:#02C851;
}
#burger span {
background: #02C851;
}
h1,p{
font-style: italic;
font-variant: normal;
}
h1,a,p{
font-family: Arial, sans-serif;
color:white;
}
h1{
font-weight: 400;
font-size: 2em;
margin-left: 10px;
}
p{
font-size: 2.5em;
font-weight: 400;
margin-left: 80px;
}
#content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 700px;
height: 150px;
}
@media screen and (max-width: 640px) {
h1 { font-size:1.5em; }
p {font-size:2em;}
}
@media screen and (max-width: 480px) {
h1 { font-size:1.2em; }
p {font-size:1.7em;}
}
@media screen and (max-width: 400px) {
h1 { font-size:1em; }
p {font-size:1em;}
}
body{
background: #02C851;
}
svg{
margin: -4px;
}
svg path {
fill: #ffffff;
}
h1,a,p{
color: white;
}
header,#buttom,#top,#content{
position: absolute;
}
header{
margin-top: 20px;
margin-left: 20px;
}
#buttom {
width: 100%;
bottom: 0;
margin-top: auto;
}
#top {
width: 60%;
top: 0; right: 0;
}
a{
background: #eb2951;
box-shadow: 2px 2px 10px #eb2951;
line-height: 2em;
margin-left: 20px;
text-align: center;
display: inline-block;
width: 100px;
height: 30px;
text-decoration:none;
transition-duration: 0.5s;
}
a:hover{
font-weight: bold;
background: none;
box-shadow: none;
line-height: 1.6em;
width: 96px;
height: 26px;
border: 2px solid #eb2951;
color: #eb2951;
}
header a.visibility{
display: block;
}
@media screen and (max-width: 960px) {
header a{
display:none;
margin-top: 5px;
}
}
header a.active{
font-weight: bold;
background: none;
box-shadow: none;
width: 96px;
height: 26px;
line-height: 1.6em;
border: 2px solid #eb2951;
color: #eb2951;
}
#burger-container{
display: none;
position:absolute;
left: 10px;
top: 10px;
}
@media screen and (max-width: 960px) {
#burger-container {
display: block;
}
}
#burger{
cursor:pointer;
display:block;
}
#burger span{
background: #eb2951;
display:block;
width:25px;
height:3px;
margin-bottom: 3px;
position: relative;
top:0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2),
#burger-container.open span:nth-child(3){
width: 0;
opacity:0;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top:9px;
}
#burger-container.open span:nth-child(4){
transform: rotate(45deg);
top:-9px;
}
