How to centralize content inside a form - html

Question

Could someone help me? I am with this form trying to centralize all fields in it. I've tried a bunch of different stuff, and I've noticed that the code works differently inside the theme that I am using. Is there another way to do it rather than margin: 0 auto;? Any help will be really appreciated. Here is the url. Thank you
<div id="instant-quote-form">
<form action="http://natesolutions.vonigo.com/external/" accept-charset="UTF-8" method="get" onsubmit="return submitForm(this)">
<div class="instant-quote">
<h3 class="quote-title">Instant Online Quote</h3>
</div>
<div class="house-type">
<input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="1" checked />Residential
<input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="2" />Commercial
</div>
<div class="zip-code">
<input type="text" id="zip" name="zip" value="" placeholder="Enter Postal Code"/>
</div>
<div class="house-size" id="divServices1">
<select id="xserviceTypeID1" onchange="changeService(this)">
<option value="14" selected>Small House (1200-2000sq.ft)</option>
<option value="17">Medium House (2001-2800sq.ft)</option>
<option value="18">Large House (2801-3500sq.ft)</option>
<option value="19">XL House (3500+)</option>
</select>
</div>
<div class="button-go">
<input type="submit" value="Go" />
</div>
<input type="hidden" id="xserviceTypeID2" value="20" />
<input type="hidden" id="xserviceTypeID5" value="20" />
<input type="hidden" id="clientTypeID" name="clientTypeID" value="1" />
<input type="hidden" id="serviceTypeID" name="serviceTypeID" value="14" />
</form>
</div>
<style>
#instant-quote-form {
width: 100%;
margin: 0 auto;
}
.instant-quote {
float: left;
margin: 20px 5px;
padding-top: 4px;
}
.house-type {
float: left;
margin: 20px 5px;
color: #ffffff;
font-size: 16px;
padding-top: 5px;
}
.zip-code {
float: left;
margin: 20px 5px;
border: 1px solid #ffffff;
border-radius: 3px;
color: #000000;
}
.house-size {
float: left;
margin: 20px 5px;
border: 1px solid #ffffff;
border-radius: 3px;
color: #000000;
}
select#xserviceTypeID1 {
border: 1px solid #ffffff;
font-size: 13px;
padding: 10px;
color: #000000;
}
.button-go {
float: left;
margin: 20px 5px;
}
h3.quote-title {
margin-bottom: 0;
color: #ffffff;
}
input#zip {
margin-bottom: 0;
border: 1px solid #ffffff;
font-size: 13px;
padding: 9px;
}
input#zip::placeholder {
color: #000000;
}
input[type=text]::placeholder {
color: #000000;
}
input#xclientTypeID {
margin: 0 5px;
}
input[type="submit"] {
height: 37px;
width: 50px;
background: #55b948;
color: #fff;
border-radius: 3px;
text-transform: uppercase;
border: 1px solid #55b948;
font-weight: bold;
}
</style>

Answer 1

As your #instant-quote-form is as wide as its parent, centering this element will not do anything. What you will need to do is to center the <form> inside of its container. This can be done by applying display:flex to #instant-quote-form and then margin:0 auto to #instant-quote-form > form:
#instant-quote-form {
display: flex;
}
#instant-quote-form > form {
margin: 0 auto;
}

Answer 2

Try enclosing your <form> within <center> tag
Additionally, If you want the form with elements in a vertically aligned fashion then set float to none for each direct child of your <form>
If this isn't what you were looking for, please elaborate your issue and expected outcome.