导航栏和页面顶部之间的差距

Question

您好，我想知道是否有人可以帮我尝试修复导航栏和页面顶部之间的这个差距，我检查了css是否有任何边距或任何可能表示间隔但是根本无法找到或查找的内容修复，请有人可以帮助我吗？

（为了更方便地查看网站和问题click here并将鼠标悬停在家中或托管上，您会看到顶部和导航栏之间的差距）

＆＃13;

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");

@import url("https://fonts.googleapis.com/css?family=Raleway:400,300,500,600");

html {
  width: auto;
  overflow-x: hidden !important;
  margin: 0px;
  padding: 0px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    z-index: 1;
    top: 0px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.navbrand {
    font-family: sans-serif;
    color: white;
    position: absolute;
    top: 15px;
    left: 90px;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
}

.navigation-bar {

  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: right;
}

.navigation-bar li  {
  list-style-type: none;
  padding: 0px;
  height: 27px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

.navigation-bar li a {
  position: relative;
  color: white;
  font-size: 16px;
  font-family: sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 35px;

}

#navigation-container {
  width: 1200px;
  margin: 0 auto;
  height: 84px;
  z-index: 1;
  position: relative;
}

.dropdown:hover .dropdown-content {
    display: block;
    width: 200px;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: gray;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content a:hover {background-color: gray
}

#menu {
  float: right;
}

.button {
    position: relative;
    background-color: #1DB2E3;
    border: 2px;
    border-radius: 25px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    top: 70px;
}

}
body {
  font: 14px 'Raleway', Arial, sans-serif;
  line-height: 1.7em;
  font-weight: 300;
  margin: 0px;
  padding: 0px;
  width: auto !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main {
  background-image: url("../images/bg.png");
  background-size: cover;
  height: 425px;
  width: 100%;
  display: table;
}

.main2 {
  background-image: url("../images/bg.png");
  background-size: cover;
  height: 75px;
  width: 100%;
  display: table;
}

h1, h3, h4, h5, h6 {
  font-weight: 400;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
}

.aboutus {
    color: #AAAAAA;
    line-height: 1.5;
    font-size: 16px;
    margin: 0;
    padding-left: 65px;
    padding-right: 65px;
}

.title2 {
  text-transform: uppercase;
  padding: 40px 0 0 0;
  color: #6C6C6C;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

#button1 {
  border-radius: 100px;
  font-weight: normal;
  padding: 15px 30px;
  border: 0;
}

#button1 {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  -webkit-transition: 700ms background ease-in-out;
  transition: 700ms background ease-in-out;
  background: #1DB2E3;
  color: #FFFFFF !important;
}

#button1:hover {
    background: #333E4F;
  }

#main-navigation {
  background: #120D36;
  position: relative;
  border-bottom: 0.5px solid #ffffff;
  min-height: 50px;
  font-size: 16px;
  color: white;
}

a:link, a:hover, a:visited, a:active {
   color: #ffffff;
}

#link1 {
  color: #1DB2E3;
}

hr {
  padding-top: 10px;
}

h2 {
  font-size: 150px;
}

.featureblocks {
  color: #AAAAAA;
  line-height: 1.5;
  font-size: 16px;
}

.featuretitle {
  color: #000000;
  font-weight: bold;
  padding-top: 10px;
}

.featureitem {
  font-weight: 540;
}

.col-md-4 {
  padding-top: 50px;
}

#lastcol {
  padding-bottom: 50px;
}

.bottomtext {
  color: #ffffff;
}

.footer {
  background-image: url("../images/bg.png");
  min-height: 50px;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  color: #ffffff;
  margin:0;
  padding:0;
}

#footer1 {
  padding-top: 13px;
  padding-left: 80px;
}

#footer2 {
 padding-top: 13px;
 padding-right: 80px;
}

.nav .nav-tabs {
  text-align: right;
}

#boetons{
    padding-top: 13px;
    float:right;
    list-style:none;
    background: #120D36;
    position: relative;
    text-align:center;
}
#boetons ul{
    list-style:none;
    background: #120D36;
    position:relative;
}

#boetons li{float:left;position:relative;background:#120D36;}/* ie needs position:relative here*/

#boetons a{
    text-decoration:none;
    background:#120D36;
    float:left;
    color:#fff;
    padding-left: 8px;
    padding-right: 8px;
    text-align:center;
}

＆＃13;

<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<html>

<head>
  <!-- Meta Data -->
  <meta charset="UTF-8">
  <meta name="description" content="Equinox Hosting. Affordable Minecraft Hosting for all!">
  <meta name="keywords" content="Hosting, Premium, Minecraft, Equinox">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="author" content="www.davyydevelopment.site">
  <title>Equinox Hosting | Affordable Minecraft Hosting</title>

<!-- Style -->

<!-- Font Awesome -->
<script src="https://use.fontawesome.com/1e0756f001.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Bootstrap -->
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<!-- Animate -->
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
</head>

<body>

<div class="main2">
  <div class="navbrand">
      <p><font size="5">Equinox Hosting</font></p>
  </div>
  <div id="menuwrapper">
<div class="navigation-bar">
<div class="navbar-inner">
  <div id="navigation-container">
    <ul>
          <li><a href="index.html">Home <i class="fa fa-home"></i></a></li>
          <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Hosting <i class="fa fa-caret-down"></i></a>
    <div class="dropdown-content">
      <a href="minecraft-hosting.html">Minecraft Hosting</a>
          <li class="dropdown">
              <a href="javascript:void(0)" class="dropbtn">Login <i class="fa fa-caret-down"></i></a>
  <div class="dropdown-content">
    <a href="#">Client Area</a>
    <a href="#">Xeon Panel</a>
    <a href="#">Cpanel</a>
            </div>
            </div>
        </li>
      </ul>
  </div>
</div>
 </div>
 </div>

<div class="main">
<div class="inner">
  <h1>HOSTING FOR EVERYONE!</h1>
  <br>
  <h4>Want to get 10% off? Use code <span class="bold">'LAUNCH10'</span></h4>
  <br>
  <button id="button1" type="button" class="btn btn-primary btn-lg active animated pulse infinite"><a href="#">Get started now</a></button>
</div>
</div>

<div class="container">
  <h2 class="title2">About us</h2>
  <br>
  <br>
  <strong><p class="aboutus text-center">We are Equinox Hosting, launched in 2017 with a passion for providing our customers with the highest quality services and
    solutions at the lowest prices, affordable for everyone. We always try to answer support tickets &amp; questions as soon
    as possible, so if you do have any questions or queries regarding our services head to
    our <a id="link1" href="contact.html">contact</a> page.</p></strong>

    <br>
    <br>
</div>

<hr>

<div class="features">
    <h2 class="title2">Features</h2>
    <br>
    <br>
    <strong><p class="aboutus text-center">The more affordable approach to stable minecraft server solutions.</p>
            <p class="aboutus text-center">Inexpensive, reliable and feature-rich!</p></strong>
</div>

<div class="container">
  <div class="featureblocks">
  <div class="col-md-4 text-center">
   <img src="images/accelerator.png" alt="accelerator" height="50" width="50">
   <p class="featuretitle">SSD Ready</p>
   <p class="featureitem">All of our servers utilize the latest and fastest SSD technology available.</p>
  </div>
  <div class="col-md-4 text-center">
    <img src="images/lock.png" alt="lock" height="50" width="50">
    <p class="featuretitle">DDoS Protection</p>
    <p class="featureitem">All of our servers are protected from a range of DDoS attacks via global filtering PoPs.</p>
  </div>
  <div class="col-md-4 text-center">
    <img src="images/world.png" alt="world" height="50" width="50">
    <p class="featuretitle">24/7 Support</p>
    <p class="featureitem">We proudly present 24hr support for our customers, ensuring good quality. We also offer live support.</p>
  </div>
  <div class="col-md-4 text-center">
    <img src="images/xeno.png" alt="XenoPanel" height="50" width="50">
    <p class="featuretitle">XenoPanel</p>
    <p class="featureitem">We use the Xenopanel as our Minecraft panel of choice, it allows quick and easy managment for everyone.</p>
  </div>
  <div class="col-md-4 text-center">
    <img src="images/server.png" alt="server" height="50" width="50">
    <p class="featuretitle">Secure Servers</p>
    <p class="featureitem">We boast that all of our servers have the most cutting edge security available and SSH 256-bit encryption.</p>
  </div>
  <div id="lastcol" class="col-md-4 text-center">
    <img src="images/clock.png" alt="clock" height="50" width="50">
    <p class="featuretitle">Instant Setup</p>
    <p class="featureitem">Your game server will be setup in seconds after payment, truly rapid.</p>
  </div>
</div>
</div>

<section class="footer">
<div id="footer1" class="col-md-6">
  <p>&copy; Equinox Hosting - All Rights Reserved.</p>
</div>
<div id="footer2" align="right" class="col-md-6">
  <nav>
      <a href="#">Terms of service</a>
      <a href="#">Privacy Policy</a>
  </nav>
</section>


</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将以下内容添加到CSS：

body {
margin: 0px;
}

CSS自动添加页边距。

Answer 2

custom.css第58行有margin-top:4px;导致此问题