centering within a form within a section - html

Question

Im using bootstrap 4 and have this form in a section that Im having issues with centering the button and making it the length of the two columns so that its even with input-boxes outer border. currently if i just have button at 100% width it appears centered but is longer than the inputs boxes so it looks off. Do I have it structured correctly? I used a form off there examples and am not sure if this is correct or if there is a better way.
here is my codepen:https://codepen.io/robot_head/full/qKQwqe/
html for that section:
<div class="container-fluid bg-3 text-center" id="contact">
<h3>CONTACT US</h3><br>
<div class="container">
<div class="col-sm-8 col-sm-push-2">
<form role="form">
<br style="clear:both">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
</div>
</div>
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right">SEND</button>
</form>
</div>
</div>
</div>
css:
#contact{
background-color: #febb2e;
height: 500px;
color: #000;
}
.form-area
{
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
.control{
display: block;
width: 100%;
height: 50px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
button#submit {
background-color: #8d1f2d;
border-color: #8d1f2d;
width: 100%;
border-radius: 10px;
}

Answer 1

you can fix them in many ways, the reason for the issue is that the col-sm-6 class has a padding 15px on both sides, and your button does not have any padding. As a quick fix either you can wrap your button in a div with class col-sm-12 or just add a padding of 15px on left and right of the button.