Center two divs side by side in contact form - css

Question

I'm trying to center two input fields side by side together with horizontally centering. I have two problems, the first one is that the two input fields for whatever reason overlap each other a little.
The closest I have been to solving this problem is to use "box-sizing: border-box" but that, unfortunately, removes the padding and thus change the design. The second problem is that I need both of the input fields to be in the center.
.quote-page .contact .box {
width: 70%;
}
.quote-page .contact .box .left {
float: left;
width: 50%;
}
.quote-page .contact .box .right {
float: left;
width: 50%;
}
.quote-page .form-2 {
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
width: 100%;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
Here is the complete script so you can see the problem:
https://codepen.io/anon/pen/BdQqeN

Answer 1

You had the right idea but unfortunately you are going to have make additional adjustments to what you're creating whether you use the box-sizing: border-box; or not.
The reason it's acting funny is because without border-box you are going over the total of 100% width.
In order to create what you want, I've adjusted the following:
Changed the width of the .box
Added an overflow: hidden; to .box to prevent it from collapsing with the floated children
Added margin: 0 auto; to center the children to .box
Changed the width of .box .left to width: 49%; and a margin-right: 1%; (assuming you wanted space between the inputs)
Same as the above item but for .box .right
Added box-sizing: border-box to .form-2, and increased the height to 40px and padding to 12px
Here's an updated pen using border-box on just your middle inputs:
https://codepen.io/anon/pen/YxpRVK
CSS
.quote-page .contact .box {
width: 73.5%;
overflow: hidden;
margin: 0 auto;
}
.quote-page .contact .box .left {
float: left;
width: 49%;
margin-right: 1%;
}
.quote-page .contact .box .right {
float: left;
width: 49%;
margin-left: 1%;
}
.quote-page .form-2 {
box-sizing: border-box;
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
/*border: 1px solid #ccc;*/
border: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
line-height: 1.42857143;
height: 40px;
width: 100%;
margin: 10px 0 10px 0;
padding: 12px;
}
HTML (No Changes)
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
<div class="right">
<input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
</div>
</div>

Answer 2

Hardly visible, but they're in the middle and next to each other.
I added the div with class .quote-page. You were referring to it in your CSS but in the HTML it was missing. Here it is the top element set to a width of 100%.
The div.box element is centered via margin: 0 auto.
.quote-page {
width: 100%;
}
.quote-page .box {
margin: 0 auto;
width: 70%;
display: flex;
}
.quote-page .contact .box .left {
width: 50%;
}
.quote-page .contact .box .right {
width: 50%;
}
.quote-page .form-2 {
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
color: rgb(77, 77, 77);
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
line-height: 1.42857143;
height: 30px;
margin: 10px 0 10px 0;
padding: 6px 12px;
}
<div class="quote-page">
<div class="box">
<div class="left">
<input name="email" type="email" class="form-2">
</div>
<div class="right">
<input name="email" type="email" class="form-2">
</div>
</div>
</div>

Answer 3

Simplest way...
Add css
.box {text-align: center;}
.left, .right {display:inline-block;}