Twitter Bootstrap Question posted in

Gap in between nav bar and top of page – Twitter bootstrap

Hi there I was wondering if someone could possibly help me try and fix this gap between my nav bar and top of page, i have checked the css for any margins or anything that could indicate a spacer but simply cannot find it or find a fix, please could somebody possibly help me?

enter image description here

(For easier view of the website and the problem just click here and hover your mouse over home or hosting and you will see the gap between the top and the navbar)

@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>
Tags:

2

Answers


  1. 0

    custom.css line 58 has margin-top:4px; which is causing this problem

    Login or Signup to reply.
  2. 0

    try adding the following to your CSS: 

    body {
margin: 0px;
}

    CSS automatically adds a margin.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search