Bootstrap - 部分和 div 定位

Question

我正在使用 Bootstrap 模板来构建网站。我有 2 个问题正在努力解决：

1) 当我将我的 HTML 代码放入

时，会自动将某种顶部边距/填充应用于该部分。没有影响该部分的 CSS 代码。 我似乎无法控制在顶部/底部应用了多少填充/边距。

有谁知道这是否正常以及如何控制间距量？

2) 如果我不使用该部分，而只使用 div 来分隔代码的每个部分，那么文本就在我的页面顶部，根本没有间距。我尝试使用一些 css，但任何尝试都失败了。这是我最近的基本尝试（也失败了）

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

感谢您的帮助 - 我已尝试使用引导网格、表格添加和删除部分，但它仍然被压在一起（如果我不使用部分）或相距太远（如果我使用部分)。

HTML 代码：

<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

q2 类应用在哪里？ 尝试以下方法：

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

所有样式都有效：

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