Currently utilizing a Bootstrap template for my website development, I am encountering two challenges that have me stumped:
1) Upon placing my HTML code within a <section>, an automatic top margin/padding seems to be applied to the section. Despite no CSS code explicitly targeting the section, I find myself unable to control the amount of padding/margin at the top/bottom.
Is this standard behavior, and if so, how can I adjust the spacing?
2) When opting not to use the section tag and instead rely on divs to segment my code, the text aligns directly at the page's top with zero spacing in between. My attempts at applying CSS adjustments have proven futile, as evident by my most recent basic endeavor (also resulting in failure).
.q2 {
position: relative;
margin-top: 20px;
}
Any assistance would be greatly appreciated - despite experimenting with sections, the bootstrap grid, and tables, I continue to encounter issues of either clustering (when avoiding sections) or distant separation (when leveraging sections).
HTML code:
<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>