如何删除标题和导航栏之间的空白？我试过很多事，但似乎什么都没有用

Question

我不太清楚为什么我不知道如何摆脱空白，我认为这是由于我的代码问题。我试过使用页边距-顶:0；页眉和边距-底部:0；肚脐，但似乎没有什么工作。我们将非常感谢您的帮助，但是我不知道问题在哪里。

​

/* navigation styles
/* ========================================== */

.nav-container,
nav {
  overflow: visible;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  background-color: #DFDFDE;
  margin-bottom: 0px;
}

nav {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

nav a {
  color: #9C6644;
  margin-bottom: 0px;
}

.navbar {
  background: transparent;
  height: 94px;
  max-height: 94px;
  margin: 0;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

img {
  width: 80px;
  height: 80px;
  position: relative;
  top: -25px;
}

.brand {
  float: left;
  padding: 30px 0 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

.brand a {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  text-decoration: none;
}

.navicon {
  position: relative;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 20px 0 0;
}

nav ul {
  display: inline-block;
}

nav ul.right {
  float: right;
  right: 0
}

#nav-menu a {
  font-weight: 300;
  font-size: 26px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  margin-bottom: 0px;
}

#nav-menu li {
  list-style: none;
  padding: 6px;
}

.nav-text-light a {
  color: #ffffff;
}

.sticky .nav-text-light a {
  color: #555555;
}

.sticky nav.nav-inner .navbar {
  height: 70px;
  max-height: 70px;
  margin: 0;
  background: #ffffff;
}

.sticky nav.transparent .navbar {
  background: transparent;
}

@media all and (max-width: 990px) {
  .nav-text-light a {
    color: #555555;
  }
  .nav-inner {
    background: #ffffff;
  }
  .transparent {
    background: transparent;
  }
  .navicon {
    padding-right: 10px;
  }
  nav ul.right {
    float: left;
  }
}

a.icon {
  font-size: 32px;
  padding-right: 20px;
}

.intro-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.close {
  font-family: inherit;
  font-size: 32px;
  font-weight: 300;
  text-shadow: none;
}

.close:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

.circle {
  width: 45px;
  height: 45px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  cursor: pointer;
  z-index: 99;
  padding: 4px 0 0;
}

.circle i {
  font-size: 36px;
  color: #111112;
}

.circle.dark {
  border-color: #292929;
}

.circle.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.large {
  height: 120px;
  width: 120px;
  margin-top: -60px;
  margin-left: -60px;
}

.circle.large:before {
  margin-top: -18px;
  margin-left: -10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 31.0px;
  border-color: transparent transparent transparent #ffffff;
}

.circle.large.dark:before {
  border-color: transparent transparent transparent #292929;
}

.circle.inline {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-left: 0;
  display: inline-block;
  z-index: 0;
}

@media all and (max-width: 1000px) {
  .circle.large {
    width: 90px;
    height: 90px;
    margin-top: -45px;
  }
  .circle.large:before {
    margin-top: -14px;
    margin-left: -8px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25.0px;
    border-color: transparent transparent transparent #fff;
  }
}

.list-menu {
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.9);
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  opacity: 0;
  z-index: -1;
}

.list-menu.reveal-modal {
  opacity: 1;
  z-index: 999999;
  visibility: visible;
}

.list-menu .ion-close-round {
  font-size: 31px;
  position: absolute;
  top: 32px;
  right: 32px;
  color: #fff;
  cursor: pointer;
}


/* header section styles
/* ========================================== */

#slideshow {
  background-color: #805539;
}

.colorbar {
  background-color: #805539;
  height: 100px;
  width: 100%;

<html lang="en">

<head>
  <!--

Template 2082 Pure Mix

http://www.tooplate.com/view/2082-pure-mix

-->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">

  <!-- Site title
   ================================================== -->
  <title>Pure Mix - Single Project</title>

  <!-- Bootstrap CSS
   ================================================== -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- Animate CSS
   ================================================== -->
  <link rel="stylesheet" href="css/animate.min.css">

  <!-- Font Icons CSS
   ================================================== -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/ionicons.min.css">

  <!-- Main CSS
   ================================================== -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Google web font 
   ================================================== -->
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

</head>

<body>


  <!-- Preloader section
================================================== -->
  <div class="preloader">

    <div class="sk-spinner sk-spinner-pulse"></div>

  </div>


  <!-- Navigation section
================================================== -->
  <div class="nav-container">
    <div class="img">
      <nav class="nav-inner transparent">

        <div class="navbar">
          <div class="container">
            <div class="row">

              <div class="brand">
                <a href="home.html">
                  <img src="images/logo33.jpg"></a>
                </a>
              </div>
            </div>

            <div class="navicon">
              <div class="menu-container">

                <div class="circle dark inline">
                  <i class="icon ion-navicon"></i>
                </div>

                <div class="list-menu">
                  <i class="icon ion-close-round close-iframe"></i>
                  <div class="intro-inner">
                    <ul id="nav-menu">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">About</a></li>
                      <li><a href="blog.html">Blog</a></li>
                      <li><a href="contact.html">Contact</a></li>
                    </ul>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
    </div>

    </nav>
  </div>


  <!-- Header section
================================================== -->


  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

  <div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">


    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div class="carousel-caption">
          <h3>Hotel at Midtown, Chicago IL</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
      <div class="item">
        <div class="carousel-caption">
          <h3>Hotel at Midtown, Chicago IL</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carouselFade" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselFade" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</body>

</html>

​

Answer 1

试着着色做测试。例如身体背景颜色:蓝色；肚脐->绿色。这两节之间没有空白。至于我，最好是使用标题标签的标题部分，并在标题内导航。