Sayfa küçülünce logo aşağı kayıyor yukardan boşluk oluyor. Düzeltemedim birtürlü yardımcı olabilir misiniz
<div class="header" id="head">
<div class="container">
<div class="header-top">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=""/></a>
</div>body a{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
input[type="button"]{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
padding:0 0;
margin:0 0;
}
p{
padding:0 0;
margin:0 0;
}
ul{
padding:0 0;
margin:0 0;
}
body{
padding:0 0;
margin:0 0;
font-family: 'Open Sans', sans-serif;
}
.header{
background: url("../images/banner.jpg") no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-size:cover;
min-height: 550px;
}
.header-top {
padding-top: 1em;
}
.logo{
float:left;
}
.top-menu{
float:right;
}
.top-menu ul li{
display: inline-block;
padding: 5px 15px 0px 15px;
}
.top-menu ul li a{
font-size: 1.1em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.top-menu ul li a:hover {
color: #ef664d;
}
.top-menu ul li a.active {
color: #ef664d;
font-weight: 600;
}
nav a {
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover,
nav a:focus {
outline: none;
} 