Centring HTML Objects - This includes labels, text input boxes and buttons? - php

Question

Hello fellow programmers, I have created a search form for my webpage which allows users to use three different fields to refine their search. I have been trying to align these objects with the main heading of the search page. I have tried many different methods but seems to move the objects into the centre. It's really bugging me and I have no clue in how to fix this! Any recommendations?
<p style="text-align:center">View Recipes which satisfy the following criteria:</p>
<div class="container cols justify-content center">
<div style="margin-bottom: 30px; width: 300px;">
<label for="author">By Author:</label>
<select name="author" id="author">
<option value="">Any Author</option>
<?php foreach ($authors as $author): ?>
<option value="<?php html($author['id']);?>"><?php html($author['name']);?></option>
<?php endforeach;?>
</select>
</div>
<div style="margin-bottom: 30px; width: 300px;">
<label for="category">By Category:</label>
<select name="category" id="category">
<option value="">Any Category</option>
<?php foreach ($categories as $category): ?>
<option value="<?php html($category['id']);?>"><?php html($category['name']);?></option>
<?php endforeach;?>
</select>
</div>
<div style="margin-bottom: 30px; width: 300px;">
<label for="text">Containing Text:</label>
<input type="text" name="text" id="text">
</div>
<div style="margin-bottom: 30px; width: 300px;">
<input class="btn btn-primary" type="submit" name="action" value="Search">
</div>
</div>
</form>
</div>

Answer 1

Change the margin-bottom: 30px; on all 4 div to margin: 30px auto;
If you want the align to centre then also add text-align:center; along with this margin: 30px auto;
Codepen: https://codepen.io/manaskhandelwal1/pen/PoGdxpa