How to style forms dynamically added from formsets - html

Question

I have a base form which contains fields to be filled in by the user and a button which allows the user to add up to ten instances of a different form that is relevant to the base form (this is just dynamically adding forms through django formset). When the html is loaded the base form and all content looks great, but when I go to add a form from the formset, the CSS gets messed up because the form from the formset will neither conform to the base form CSS or any CSS I've added to it.
I've made a div to contain all forms added via the formset add button so that I can format all added forms with one CSS id. However, it seems no formatting works - the added forms' elements expand the base form's margins and seem to be floated.
HTML:
<div class="center-text jumbotron">
<h2>Incident Report Form</h2>
<form method="post" class="form-horizontal">
{% crispy incident_form %}
<div id="form_set_class">
{{ incident_formset.management_form }}
<table>
{% for form in incident_formset %}
{{form.non_filed_errors}}
{{form.errors}}
{% crispy form %}
{% endfor %}
</table>
</div>
<input type="button" id="add_def_report" value="Add Report">
<div id="empty_form" style="display:none">
{{incident_formset.empty_form}}
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
CSS:
.center-text{
display: block;
text-align: center;
}
form{
display: inline-block;
margin-right: auto;
margin-left: auto;
text-align: left;
}
legend {
float: left; /*allows for top margin */
border-bottom: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#form_set_class{
clear: both;
display: block;
text-align: center;
}
Good Styling (image shows top part of form):
Messed Up Styling (image shows bottom part of form; the added formset starts at the "Supplier" dropdown):

Answer 1

I presume you have a parent and child model scenario. If that is so, then you may layout your child forms like this (laid out in tabular fashion):
<!-- ABOVE THIS WOULD BE YOUR PARENT FORMS -->
<!-- HERE WE CAN HAVE TABLE HEADER FOR THE FORMS ADDED DYNAMICALLY -->
<table class="table table-bordered table-striped table-sm">
{{ incident_formset.management_form }}
{% for form in incident_formset.forms %}
{% if forloop.first %}
<thead id="hdrID">
<tr>
{% for field in form.visible_fields %}
<th>{{ field.label|capfirst }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<!-- HERE WILL BE THE FORMS ADDED BY THE USER -->
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
{% endfor %}
</table>
<!-- BELOW THIS WOULD BE THE FORM SUBMISSION AND THE REST -->
You may then think of applying css as per your requirements using tags (eg. hdrID shown in the code).