div标签之前和之后的标头垫片

Question

在响应模式下查看时，徽标栏div ID会在其自身与周围div之间留出一个小空间。有没有办法解决这个问题而没有做出任何重大改变？

我发现这很奇怪，因为在响应模式之外查看它似乎很好。

以下是我主页的HTML：

＆＃13;

＆＃13;

#navmenu {
      height: 80px;
      z-index: 1;
      background: linear-gradient(white, #a9a9a9);
    }
    
    #logobar {
    
    height: auto;
    z-index: 1;
    background-color: white;
     }
    
    #headerlogo {
    
    max-width: 70%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    padding: 2%;
    }
    
    #iPhone {
      margin-left: auto;
      margin-right: auto;
    }
    
    .jQuery {
    
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: auto;
    }
    
    .spacer {
      width:100%;
      height:300px;
      opacity: 0.3;
      background-color: grey;
      z-index: 1;
      display:block;
    
    }
    
    .smicon {
      width: 40px;
      height: 40px;
    }
    
    .parallax {
      background-image: url(../img/rome2.jpg);
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 0;
    }
    
    .topbar{
    
    height: 30px;
    background-color: white;
    z-index: 1;
    color: black;
    
    }
    
    
    
    .col1-1 {
      width:100%;
      height:auto;
      background-color: #eaebed;
      z-index: 1;
      position:relative;
      margin: 0px;
      border: 2px solid #eaebed;
      padding: 2%;
      box-sizing: border-box;
      text-align: center;
    }
    
    .col1-g {
      width:100%;
      height:auto;
      background-color: #a9a9a9;
      z-index: 1;
      position:relative;
      margin: 0px;
      border: 2px solid #a9a9a9;
      padding: 2%;
      box-sizing: border-box;
      text-align: center;
    }
    
    .custreview {
      width:100%;
      height:auto;
      background-color: #eaebed;
      z-index: 1;
      position:relative;
      margin: 0px;
      border: 2px solid #eaebed;
      padding: 3%;
      box-sizing: border-box;
      text-align: center;
    }
    
    .button {
        background-color: #F15A24;
        border-color: #F15A24;
        border-radius:5px;
        padding: 10px;
        display: inline-block;
        font-size: 15px;
        margin: 8px;
        cursor: pointer;
        width:25%;
    
    
    }
    
    .button {
        background-color: #F15A24;
        border-color: #F15A24;
        border-radius:5px;
        padding: 10px;
        display: inline-block;
        font-size: 15px;
        margin: 8px;
        cursor: pointer;
        width:25%;
    }
    
    .buttonport {
        background-color: #F15A24;
        border-color: #F15A24;
        border-radius:5px;
        padding: 10px;
        display: inline-block;
        font-size: 15px;
        margin: 8px;
        cursor: pointer;
        width:25%;
    }
    
    .contactbar {
    float: right;
    padding-top: 10px;
    padding-right: 45px;
    font-size: 12px;
    margin:0px;
    display: inline;
    font-weight: bold;
    }
    
    .spacer {
      width:100%;
      height:300px;
      opacity: 0.2;
      background-color: grey;
    }
    
    
    .spacersm {
      width:100%;
      height:100px;
      opacity: 0.6;
      background-color: grey;
    }
    
    .wrapper {
      width: 100%;
      overflow: auto;
    
    }
    
    header {
      z-index: 1;
      margin: 0px;
      position: relative;
      display: inline;
      width: 100%;
    }
    
    body {
      margin: 0px;
      font-family: 'Slabo 27px', serif;
    }
    p {
      padding: 5px;
    }
    
    ul {
      margin:0px;
      list-style-type: none;
      padding: 0px;
      font-size: 16px;
      text-align: center;
      color: black;
      position: relative;
      top: 35px;
      font-weight: 400;
    }
    
    li {
      display: inline;
      padding: 10px;
    }
    
    a {
        text-decoration-line:none;
        color: inherit;
    }
    
    .footer {
      position:relative;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height:100px;
      background: linear-gradient(#a9a9a9,white);
      z-index: 1;
    }
    
    li a:hover {
      color: white;
      text-decoration: overline;
    }
    
    a:link, a:visited {
      color: black;
      text-decoration: none;
    }
    
    p {
      margin: 0;
    }
    
    @media screen and (min-width: 490px) {
    
    .topbar {
      height: 50px;
    }
    .contactbar {
      font-size: 22px;
    }
    #headerlogo {
      max-width: 100%;
    }
    ul {
      font-size: 22px;
    }
    h3 {
      font-size: 35px;
    }
    .spacer {
      height:550px;
    }
    
    .buttonport {
      font-size: 22px;
      width: 35%;
    }
    .content {
      font-size: 20px;
      padding: inherit;
    }
    .col1-1 {
      width: 50%;
      display: inline-block;
      position: relative;
      height:850px;
    }
    .col1-g {
      width: 50%;
      display:inline-block;
      right: 0px;
      position: absolute;
      height:850px;
    }
     .button {
       font-size: 22px;
       width: 35%;
     }
    .footer {
      height: 135px;
    }
    .smicon {
      height: 60px;
      width: 60px;
    }
    }
    
    @media screen and (min-width: 1000px) {
    
      #iPhone {
        margin-left: auto;
        margin-right: auto;
        width: 175px;
      }
    
      .parallax {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
      }
    
      ul {
        font-size: 25px;
      }
    
      .content {
        font-size: 22px;
      }
    
      .buttonport {
          border-radius:5px;
          font-size: 22px;
          display: inline-block;
          margin-top: 13%;
          cursor: pointer;
      }
    
    }

＆＃13;

      <head>
        <meta charset="utf-8">
        <meta name = "viewport" content= "width=device-width">
        <meta name = "keywords" content = "web design, mobile website, affordable design, professional website">
        <meta name = "autor" content = "Simon Dean">
        <title> Spartan | Designs </title>
      <link href="https://fonts.googleapis.com/css?family=Lato|Slabo+27px" rel="stylesheet">
        <link rel = "stylesheet" type = "text/css" href="./css/mobile.css">
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    
      <script>
        $(document).ready(function(){
          $('.slider').bxSlider();
        });
      </script>
      </head>
      <body>
    
    <div class="parallax"></div>
    
        <header>
    <div class = "topbar">
      <p class = "contactbar"> 01642 747420  </p>
      <p class="contactbar"> contact@spartan.co.uk </p>
    </div>
    
    <div id = "logobar">
    
      <img id = "headerlogo" src = "img/Logo1.png" >
    
    </div>
    
      <nav id = "navmenu">
        <ul>
          <li> <a href="#">Home</a></li>
          <li> <a href="#">Portfolio</a></li>
          <li> <a href="#">Contact Us</a></li>
        </ul>
      </nav>
        </header>
    
         <div class = "spacer"></div>
    
          <div class = "col1-1"> <h3> Bring your ideas to life </h3>
            <p class = "content"> Spartan|Design can help you realise the perfect web site whatever
              your requirements, would you like to know more? </p>
              <br>
              <div class="slider">
                <div><img class = "jQuery" src = "./img/web.jpeg"></div>
                <div><img class = "jQuery" src = "./img/web.jpeg"></div>
                <div><img class = "jQuery" src = "./img/web.jpeg"></div>
                <div><img class = "jQuery" src = "./img/web.jpeg"></div>
              </div>
            <a href="#" class="button">Contact us</a>
          </div>
    
          <div class = "col1-g">
            <h3>We have been busy!</h3>
            <p class = "content">Would you like to get a better idea of what Spartan|Design can offer you?
            Check in with some of our previous clients</p>
    
            <div><img id = "iPhone" src = "./img/iphone.png"></div>
    
            <a href="#" class="buttonport">Portfolio</a>
          </div>
    
      <div class="spacersm"> </div>
    
      <div class = "custreview"> <h2> Drawing from experience </h2>
        <p class="content"> We know it can be stressful when trying to choose the right development
          company for your website. As a result we allow our clients to be as hands
          on as they need to be during the development process, you will inform us of your design
        ideas or requirements and we will bring them to life. </p>
    <br>
          </div>
    
      <div class = "spacersm"></div>
    
        <div class = "footer">
          <ul>
            <li> <img class = "smicon" src="img/facebook.png"  alt="Facebook" longdesc="http://www.facebook.com"></li>
            <li> <img class = "smicon" src="img/instagram.png"  alt="Instagram" longdesc="http://www.instagram.com"></li>
            <li> <img class = "smicon" src="img/twitter.png" alt="Twitter" longdesc="http://www.twitter.com"></li>
          </ul>
        </div>
      </body>

＆＃13;

＆＃13;

＆＃13;

如果有人能够为我阐明这一点，我会非常感激，如果这个问题看起来太简单，我会非常感激。