html - 导航栏和页面顶部之间的间隙

Question

你好，我想知道是否有人可以帮助我尝试修复我的导航栏和页面顶部之间的差距，我已经检查了 css 是否有任何边距或任何可能指示间隔但根本找不到或找不到的东西修复，有人可以帮助我吗？

(为了更容易查看网站和问题，只需 click here 并将鼠标悬停在主页或主机上，您将看到顶部和导航栏之间的差距)

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

<!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>

Answer 1

尝试将以下内容添加到您的 CSS:

body {
margin: 0px;
}

CSS 自动添加边距。