2つのセクションの間に余分なスペースを必要としません - ブートストラップ3の背景イメージの理由

Question

私はブートストラップで新しいです。私は自分でグリッドを書く前に、今は新しいことを学ぶべきだと思っています。

私はコンテナの1つに背景イメージを持つ基本的なサイトを作っています。私はなぜ、私は余分なパディングが追加されているのか分からない。 background-size：containとcoverで試していましたが、私が望む効果ではありません。

そして、コンテナを引き伸ばすにはpadding-bottomが必要です。数学的操作は、withとpercetageを掛け合わせた画像の高さです。私自身のグリッドでは、それはおとぎ話のように働いていた。

今私は何かが欠けています。何か案は？

このjsfiddleです：https://jsfiddle.net/LukMona/qwqck9bp/2/

CSS：

.bg-img { 
    width: 100%; 
    background-image: url("https://github.com/LukMona/Doctors_Search_Basic/blob/master/images/header_background.jpg?raw=true"); 
    background-repeat: no-repeat; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
    padding-bottom: (1210/2808)*100%; 
} 
.main-top-header { 
    position: absolute; 
    width: 90%; 
    margin-top: 2%; 
    margin-left: 5%; 
    margin-right: 5%; 
} 
.main-top-header-left { 
    float: left; 
    position: relative; 
    width: 25%; 
    margin: 0; 
} 
.logo { 
    margin: 0; 
} 
h1 { 
    font-size: 2.5rem; 
    margin: 0; 
} 
.main-top-header-right { 
    position: relative; 
    float: right; 
    width: 75%; 
} 
ul { 
    text-align: right; 
} 
li { 
    display: inline-block; 
    margin-left: 5%; 
    font-size: 2rem; 
} 
a:link { 
    color: inherit; 
    text-decoration: none; 
} 
a:hover { 
    color: blue; 
} 
.main-search { 
    background-color: grey; 
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%; 
    margin: 0 auto; 
    padding-top: 2%; 
    padding-bottom: 5%; 
    border-radius: 3%; 
    position: relative; 
    ; 
    top: 10rem; 
} 
.searching { 
    width: 50%; 
    margin: 0 auto; 
} 
.find { 
    width: 80%; 
    background-color: grey; 
} 
span:first-child { 
    padding: 2%; 
    margin-bottom: 2%; 
} 
.search { 
    float: left; 
} 
input { 
    height: 3rem; 
    width: 75%; 
    padding-left: 2%; 
} 
button { 
    width: 20%; 
    height: 3rem; 
    background-color: blue; 
    color: white; 
    border: none; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
} 
nav { 
    background-color: grey; 
    height: 200px; 
} 

HTML：

<header class="container-fluid bg-img"> 
    <div class="row"> 
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 main-header"> 

     <!-- TOP HEADER --> 
     <div class="main-top-header"> 

     <div class="main-top-header-left"> 
      <div class="logo"> 
      <h1> 
         Logo 
        </h1> 
      </div> 
     </div> 

     <div class="main-top-header-right"> 
      <div class="menu"> 
      <ul> 
       <li><a href="#">one</a> 
       </li> 
       <li><a href="#">two</a> 
       </li> 
       <li><a href="#">three</a> 
       </li> 
       <li><a href="#">four</a> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <!-- END OF TOP HEADER --> 

     <div class="main-search"> 
     <div class="searching"> 
      <span>type something</span> 
      <br> 
      <input class="search" type="text" name="search" placeholder="typing"> 
      <button class="search"> 
      <span>find</span> 
      </button> 
     </div> 
     </div> 

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

<nav class="row"> 
    <div> 
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12"> 

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

Answer 1

は