css - 带超大屏幕的小白色空间

Question

正如您在这里看到的，我的巨型电子管没有触及导航栏。我在使用 CSS 时遇到了问题。我该如何解决？我究竟做错了什么？我已经尝试修复它一段时间了

body {
  font-family: 'Lora', 'Times New Roman', serif;
  background-color: #EBDBDF;
  font-size: 20px;
  color: #333333;
}
p {
  line-height: 1.5;
  margin: 30px 0;
}
p a {
  text-decoration: underline;
}
.navbar-default {
  background-color: #50494C;
}
.navbar-brand {
  color: #fff !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: #fff;
  text-transform: uppercase;
  background-color: rgba(12, 184, 182, 0.21);
}
.navbar-default .navbar-nav > li > a {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  text-transform: uppercase;
  background-color: rgba(12, 184, 182, 0.21);
}
.affix .navbar-nav > li > a:hover,
.affix .navbar-nav > li > a:focus {
  background-color: rgba(12, 184, 182) !important;
}
@media (max-width: 767px) {
  .navbar-brand {
    padding: 0;
  }
}
.jumbotron {
  margin-top: 25px;
  margin-bottom: 5px;
  padding: 20px;
}
footer {
  padding: 50px 0 65px;
}
.b-search {
  background: #50494C;
  color: white;
  padding: 60px 0;
  margin-bottom: 20px;
}
.photo {
  text-align: center;
}
.jumbotron-welcome {
  margin-bottom: 45px;
}
.jumbotron-form {
  margin-right: 150px;
  color: white;
}
.search {
  color: white;
  position: relative;
  text-align: center;
}
h3.text-center {
  color: #fff;
}
.text-center {
  text-align: center;
  position: relative;
}
hr.botm-line {
  height: 3px;
  width: 60px;
  background: #ffb737;
  position: relative;
  border: 0;
  margin: 20px 0 20px 0;
}
.service-info {
  margin-top: 50px;
  float: right;
}
.icon-info {
  float: right;
}
#state {
  padding: 15px;
}
.content {
  padding-top: 30px;
}
.heading {
  position: relative;
  text-align: center;
}
.heading:after {
  left: 50%;
  height: 3px;
  width: 50px;
  content: " ";
  bottom: -35px;
  margin-left: -25px;
  position: absolute;
}
.heading h2 {
  font-size: 40px;
  font-weight: 500;
  margin: 0 0 20px;
  color: #444;
}
.heading p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8693a7;
}
centered-form {
  margin-top: 60px;
}
.text {
  color: #ffffff !important;
}
.search {
  color: orange !important;
}
.team-members {
  width: 70%;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 35px;
}
.team-members .team-avatar {
  position: relative;
}
.team-members .team-avatar:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  background: rgba(129, 129, 129, 0.1);
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members .team-avatar img {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.team-members .team-desc {
  left: auto;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  opacity: 0;
  color: #fff;
  -webkit-transform: translate3d(0, 10%, 0);
  transform: translate3d(0, 10%, 0);
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.team-members .team-desc h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff;
}
.team-members .team-desc span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}
.team-members:hover .team-avatar:after {
  background: rgba(47, 60, 72, 0.5);
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members:hover .team-desc {
  -webkit-transform: translate3d(0, -5%, 0);
  transform: translate3d(0, -5%, 0);
  -webkit-transform: translate3d(0, -10%, 0);
  transform: translate3d(0, -10%, 0);
}
.team-members:hover .team-desc {
  opacity: 1;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.list-inline>li {
  padding: 0 10px 0 0;
}
.container-pad {
  padding: 30px 15px;
}
.bgc-fff {
  background-color: #fff!important;
}
.box-shad {
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}
.brdr {
  border: 1px solid #ededed;
}
.fnt-smaller {
  font-size: .9em;
}
.fnt-lighter {
  color: #bbb;
}
.pad-10 {
  padding: 10px!important;
}
.mrg-0 {
  margin: 0!important;
}
.btm-mrg-10 {
  margin-bottom: 10px!important;
}
.btm-mrg-20 {
  margin-bottom: 20px!important;
}
.clr-535353 {
  color: #535353;
}
@media only screen and (max-width: 991px) {
  #property-listings .property-listing {
    padding: 5px!important;
  }
  #property-listings .property-listing a {
    margin: 0;
  }
  #property-listings .property-listing .media-body {
    padding: 10px;
  }
}
@media only screen and (min-width: 992px) {
  #property-listings .property-listing img {
    max-width: 180px;
  }
}
.jumbotron {
  background: #50494C;
  color: #FFF;
  border-radius: 0px;
}
.jumbotron-sm {
  padding-top: 24px;
  padding-bottom: 24px;
}
.jumbotron small {
  color: #FFF;
}
.h1 small {
  font-size: 24px;
}
#ceoimg {
  width: 350px;
  height: 400px;
  padding-top: 40px;
  padding: 40px 0;
  border-radius: 70px;
}
/* Membership */

.panel {
  text-align: center;
  position: relative;
}
.panel:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35);
}
.panel-body {
  padding: 0px;
  text-align: center;
}
.the-price {
  background-color: rgba(220, 220, 220, .17);
  box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
  padding: 20px;
  margin: 0;
}
.the-price h1 {
  line-height: 1em;
  padding: 0;
  margin: 0;
}
.subscript / {
  font-size: 25px;
}
footer {
  font-size: 1.3em;
  text-align: center;
  padding: 18px;
  color: #ffffff;
  background: #222222;
}
footer a {
  color: #ffffff;
}
footer a:hover {
  color: #fefefe;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Exective Business Brokers</title>
  <!-- Latest compiled and minified CSS -->
  <!-- Bootstarp Css-->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  <!-- different fonts css -->
  <link href="css/main.css" rel="stylesheet">
  <!-- main css file -->
  <link href="css/animate.css" rel="stylesheet">

  <!-------------------------->
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="col-md-12">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Exective Business Brokers</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="index.html">Home</a>
            </li>
            <li role="presentation" class="dropdown">

              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                        Buy a Business <span class="caret"></span>
                                    </a>
              <ul class="dropdown-menu">
                <li><a href="aboutus.html">Register with EBB</a>
                </li>
                <li><a href="aboutus2.html">Tools</a>
                </li>
                <li><a href="service.html">Resources</a>
                </li>
              </ul>
            </li>
            <li role="presentation" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                        List a Business  <span class="caret"></span>
                                    </a>
              <ul class="dropdown-menu">
                <li><a href="blog.html">List with EBB</a>
                </li>
                <li><a href="blogtwo.html">Open List with EBB</a>
                </li>
                <li><a href="blogone.html">Tools</a>
                </li>
                <li><a href="blogthree.html">Resources</a>
                </li>
              </ul>
            </li>
            <li role="presentation" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                       Services <span class="caret"></span>
                                    </a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html">Services</a>
                </li>
                <li><a href="portfolioone.html">Financing</a>
                </li>
                <li><a href="portfoliotwo.html">Consulting</a>
                </li>
                <li><a href="portfoliothree.html">Preferred Buyers Program</a>
                </li>
                <li><a href="portfolio-details.html">Mergers and Acquisitions</a>
                </li>
                <li><a href="portfolio-details.html">Business Valuation</a>
                </li>
              </ul>
            </li>

            <li role="presentation" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                        About Us <span class="caret"></span>
                                    </a>
              <ul class="dropdown-menu">
                <li><a href="About.html">About</a>
                </li>
                <li><a href="portfoliofour.html">Management</a>
                </li>
                <li><a href="portfolioone.html">Why EBB?</a>
                </li>
                <li><a href="portfoliotwo.html">Success</a>
                </li>
                <li><a href="portfoliothree.html">Broker Profiles</a>
                </li>
                <li><a href="portfolio-details.html"> Join EBB</a>
                </li>
                <li><a href="portfolio-details.html">Strategic Alliances</a>
                </li>
              </ul>
            </li>
            <li class="dropdown" id="menuLogin">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
              <div class="dropdown-menu" style="padding:17px;">
                <form class="form" id="formLogin">
                  <input name="username" id="username" type="text" placeholder="Username">
                  <input name="password" id="password" type="password" placeholder="Password">
                  <br>
                  <button type="button" id="btnLogin" class="btn">Login or Register</button>
                </form>
              </div>
            </li>

            <li class="dropdown" id="menuLogin">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Call Us!</a>
              <div class="dropdown-menu" style="padding:17px;">
                <form class="form" id="formLogin">
                  <a class>1 (888) 851-9049</a>
                </form>
              </div>
            </li>



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

  </nav>


  <header class="jumbotron" style="background-image: url('img/home-bg.jpg')">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <div class="site-heading">
            <img src=/found6test/images/logo.png>
            <hr class="small">
            <span class="subheading">Welcome to Executive Business Brokers</span>
            <p>Executive Business Brokers (EBB) has handled the sales and marketing efforts of over 1,000 small to mid-size businesses in the retail, distribution, manufacturing and service industries.</p>
            <p>EBB has been bridging the gap between the buyers and sellers of businesses since 1985. With over 20,000 buyers, hundreds of businesses for sale at any one time and a knowledgeable and professional staff, our business is selling businesses.</p>
            <p>Whether you’re looking to sell your business, buy a business or just need some advice, EBB offers the services that can help you achieve your goals.</p>
          </div>
        </div>
      </div>
    </div>
  </header>

Answer 1

.navbar {
    margin-bottom: 0;
}

.jumbotron {
    margin-top: 0;
}

会成功的。确保 Nav 的 margin-bottom 为 0 并且 .jumbotron 的 margin-top 也为 0