Bootstrap - positionnement de section et div

Question

J'utilise un modèle Bootstrap pour créer un site web. J'ai 2 questions que j'ai du mal à résoudre:

1) Lorsque je mets mon code HTML dans une section <>, une sorte de marge supérieure/remplissage est automatiquement appliquée à la section. Il n'y a pas de code CSS affectant la section. Je n'arrive pas à contrôler la marge/marge appliquée en haut/en bas.

Est-ce que quelqu'un pourrait savoir si cela est normal et comment puis-je contrôler l'espacement?

2) Si je n'utilise pas la section mais seulement la div pour séparer chaque partie de mon code, le texte se place tout en haut de ma page sans aucun espacement. J'ai essayé d'utiliser des css mais j'ai échoué à toute tentative. Cette ma plus récente et de base tentative (également défaut)

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

Merci pour toute aide - je l'ai essayé d'ajouter et de la section suppression, en utilisant la grille d'amorçage, une table mais où tout va toujours soit écrasé ensemble (si je don n'utilisez pas de sections) ou trop éloignées (si j'utilise des sections).

code 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

Où est la classe q2 appliquée? les opérations suivantes:

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

tous les styles de travail:

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