ブートストラップ - セクションとdivの位置付け

Question

私はブートストラップテンプレートを使ってウェブサイトを構築しています。

1）私のHTMLコードを<セクションに入れると、自動的に何らかの上余白/パディングがセクションに適用されます。セクションに影響するCSSコードはありません。 上部/下部にどのくらいの余白/余白が適用されているかを制御できないようです。

これが正常であれば誰でも知っていますか、どうやって間隔を制御できますか？

2）セクションを使用せずにdivだけを使用してコードの各部分を区切っても、テキストはスペースのないページの一番上に表示されます。私はいくつかのCSSを使用してみましたが、どんな試みでも失敗しました。 （また失敗）この私の最も最近の基本的な試みの任意の助け

.q2 { 
    position: relative; 
    margin-top: 20px; 
} 

おかげで - 私は追加すると、ブートストラップグリッド、テーブルを使用して、セクションを削除しようとしたが、それはすべてまだ（一緒に押しつぶさますいずれかの場合、私ドンセクションを使用していない場合）または離れすぎている場合（セクションを使用する場合）

HTMLコード：Q2クラスが適用され

<section> 
    <div class="container"> 
    <form action="sqlQuery.php" method="post" name="foundationsurvey"> 
    <div class="row"> 
     <div class="col-12 text-center pb-3"> 
     <label for="Q1">Q1</label> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-sm-12 text-left ml-4"> 
      <input type="radio" id="dry" required> <label for="dry"> Dry </label> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-12 text-left ml-4"> 
      <input type="radio" id="normal" required> <label for="normal"> Normal</label> 
     </div> 
     </div> 
</div> 

    <!--Q2--> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-12"> 
      <label for="Q2">Q2</label> 
      </div> 
     </div> 
      <div class="row"> 
      <div class="col"> 
       <input type="text" name="product1" placeholder="Brand, Product Name" required> 
      </div> 
       <div class="col"> 
       <input type="text" name="product2" placeholder="Brand, Product Name" required> 
       </div> 
     </div> 
     </div> 
    </section> 
    </header> 

Answer 1

？ 次のことを試してください。

... <div class="container q2"> ... 

すべてのスタイルが動作：

section { 
    margin-top: 150px; 
} 
.q2 { 
    /* position: relative; */ 
    margin-top: 20px; 
}