How Do I Center The Input Fields On This Form? - forms

Question

https://ibb.co/3M8TjjY
Codepen
https://codepen.io/shon-lucky/pen/WNozGRe?editors=1100
Trying to center this form and its beating me up. So far i have used margin: auto. But everytime i do the form centers but the input elements are not centered in the form. I have used positioning where i made the parent container relative and made the form absolute but the everything dissapears before i even try to move it. Can someone help me with this plz
<form action="">
<div class="firstrow">
<label for="How Many People">How Many People</label>
<input type="text">
</div>
<div class="firstrow">
<label for="date">Date</label>
<input type="text">
</div>
<div class="firstrow">
<label for="time">Time</label>
<input type="text">
</div>
<br style="clear:both">
<div class="secondrow">
<label for="name">Name</label>
<input type="text" placeholder="Your full name">
</div>
<div class="secondrow">
<label for="email">Email</label>
<input type="text">
</div>
<div class="secondrow">
<label for="Phone">Phone</label>
<input type="text" placeholder="You phone">
</div>
</div>
</form>
</section>
.section4{
width:100%;
height: 380px;
background-color: #374a5c;
}
.section4 .wrapper{
width:80%;
height:380px;
margin:auto;
border: 1px solid red;
}
form{
}
label,input{
display:block;
}
.firstrow{
float: left;
}
.secondrow{
float:left;
}

Answer 1

Thank you for the Codepen! Here is a fix to center the form elements:
Link to the edited pen : https://codepen.io/pathiout/pen/YzpaLdR?editors=1100
Here is the css I used :
.firstrow {
display: inline-block;
margin: 10px auto;
}
.secondrow {
display: inline-block;
}
Basically I removed the "float left" attributes that prevents any centering from parent. Is this an acceptable solution for you ?

Answer 2

Have you tried text-align? Sometimes in HTML, the text align can center html element other than text, I've used it many times already.
<div style="text-align: center"><input type="text"> ....