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;
}