Safari，IE，Chrome中的div之间的主题浏览器空白

Question

我已经尝试了大部分建议，以纠正已经提出的问题中建议的div之间的差距，但没有成功。任何人都可以帮我找到答案

HTML：

    <section id="main-slider" class="main-slider carousel slide"     data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
     <div class="item item-1 active">
      <svg width="1000px" height="360px" xmlns=""><g></g></svg>     
      <div class="carousel-caption">

         <i class="fa fa-desktop"></i>
       </div><!-- /.slider-icon -->
       <h3 class="carousel-title"><span></span></h3>
       <a class="btn text-btn" href="#"></a>
     </div><!-- /.carousel-caption -->
    </div>

    <div class="item item-2">
     <svg width="1000px" height="360px" xmlns=""><g></g></svg> 
     <div class="carousel-caption">   
      </div><!-- /.carousel-caption -->
     </div>
    </div>

     <!-- Controls -->
   <a class="left carousel-control" href="#main-slider" role="button"  data-slide="prev">
    <i class="fa fa-angle-left"></i>
   </a>
   <a class="right carousel-control" href="#main-slider" role="button" data-slide="next">
    <i class="fa fa-angle-right"></i>
   </a>

   </section><!-- /#main-slider -->

    <section id="about" class="about">
    <div class="about">
     <div class="container">
      <div class="about-area">
        <div class="title-area text-center">
          <h2 class="about-title">Browse Our Selections</h2>
          <p class="title-description"></p>
        </div><!-- /.title-area -->
        <div class="about-items">

的style.css

    /* Main Slider Section */
    #main-slider {
      overflow: hidden; 
      width: 1000px; 
       height: 360px;
    }

    #main-slider {
      white-space: nowrap; 
      position: relative; 
      display: block;
      overflow: hidden;
    } 

    .carousel-inner {
      position: relative;
      overflow: hidden;
      margin-left: 40px;
   }
    .carousel-inner img {
       display: none;
   }
     .carousel-caption {
        left: 0;
        padding-bottom: 0px;
        padding-left: 30px;
        padding-top: 60px;
        bottom: 5px;
        background-image: url(../../../../Desktop/header-assets/main%20image   /web6.jpg);
        background-position: center center;
        overflow: hidden;
        display: block;
         z-index: 999;
      }
     .image {
       display: block;
       width: 1000px;
       overflow: hidden;
       background-repeat: no-repeat;
   } 
     #item item-1 {
       max-width: 1000px;
       max-height: 360px;
       display: none;
    }
     #item item-2 {
       max-width: 1000px;
       max-height: 360px;
       display: inline;
      overflow: hidden;
    }
    .left .carousel-control {
    display: none;
    }
   .right .carousel-control {
    display: none;
    }
    .slider-icon {
    display: none;
    }
    .carousel-title {
    font-size: 4em;
    display: none;
    }
    .main-slider span {
    display: none;
    }
    .main-slider .btn {
    display: none;
    }
    .main-slider .btn:hover {
    display: none;
    }
    .main-slider .carousel-control.right,
    .main-slider .carousel-control.left {
    float: none;
    display: none; 
    }
    .main-slider .carousel-control.right {
    float: left; 
    display: none;
    }
    .main-slider .carousel-control.left {
    float: right;
    display: none;

    }

     .main-slider:hover .carousel-control.right {
    right: 0%;
    display: none;
   }    
    .main-slider:hover .carousel-control.left {
    left: 0%;
    display: none;
   }
    .main-slider .carousel-control:hover {
    display: none;
   }

   /* About Section */
   .about #about {
    appearance:normal;
    background-position: center;
    width: auto;
    display: block;
    margin-top: -30px;
   }
   .container {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 40px;
    }
   .about-area {
    background: #f7f7f7;
    border-top: 2px solid #D11212;
    border-bottom: 2px solid #D11212;
    position: relative;
   }

http://hopealley.com/ecnal/webroot/

Answer 1

我在你的源体中发现=“固定”......为什么？ 为什么不对标题使用固定位置。

example :
@media (min-width: 1200px) {
  .container {
    width: 1000px;
    margin: 0 auto;
  }
}