Bootstrap columns offsetting for no reason - html

Question

I have been coding out a form inside a bootstrap accordion collapse but there is an issue on md and lg screens with columns.
As expected on xs and sm, it looks like so:
Perfectly as expected, however when I go up to md and lg, this happens:
I have tried inspecting the element and so forth but everything is as I would expect and should be working perfect, here you can see the parents width and then the widths of each child:
The parent:
Each child:
As you can see, each child is indeed 50% of the parent, thus, there is no reason for it going onto a new line, nor for offsetting by 50%.
I have look at everything I can think of:
Did I accidentally add an offset class? No.
Is there a hidden col-md-6 that is doing the offsetting? No.
Is the child larger than 50%? No.
So now I am lost and ask for ideas.
Here is a code snippet of the affected form:
.payment-bottom-container {
background: white;
color: #C99C49;
}
.payment-bottom-container .section-intro-title {
color: #C99C49;
text-align: center;
font-size: 36px;
padding-top: 20px;
text-transform: uppercase;
}
.payment-bottom-container .section-intro-title::after {
border-color: #C99C49;
max-width: 40px;
left: 125px;
}
.payment-bottom-container .final-step-text {
color: #C99C49;
text-align: center;
margin: 0 auto;
max-width: 700px;
width: 100%;
font-family: "montserrat-regular";
font-weight: bold;
letter-spacing: 0.2em;
font-size: 16px;
padding: 0 10px 10px 10px;
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-heading {
background: #f1f1f1;
border-top: 2px solid #ccc;
border-radius: 0;
}
.payment-bottom-container .panel-group .panel .panel-heading h4 a {
color: #190e8c;
font-family: "Museo500";
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input,
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 select {
width: 100%;
margin-bottom: 10px;
outline: 0;
padding: 5px;
font-family: "Raleway";
font-weight: bold;
color: #190e8c;
letter-spacing: 0.1em;
font-size: 12px;
}
.payment-bottom-container .panel-group .panel .panel-body form .container {
max-width: 100%;
}
.payment-bottom-container .panel-group .panel .panel-body form .delivery-title {
color: black;
font-family: 'Raleway';
font-size: 24px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
width: 50%;
}
#media (max-width: 991px) {
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
width: 100%;
}
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input[type="submit"] {
background-color: #C99C49;
color: white;
font-family: 'Raeleway';
text-align: center;
font-size: 16px;
border: 0;
outline: 0;
text-transform: uppercase;
padding: 10px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label {
display: block;
color: #063c58;
font-family: 'Raeleway';
text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="payment-bottom-container">
<h1 class="section-intro-title">The final step</h1>
<p class="final-step-text">Just let us know where you would like us to deliver your case to and it will be on its way!</p>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Enter Delivery Address
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form action="#" method="post">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="delivery-title">Where should we ship?</h1>
</div>
<div class="col-xs-12 col-md-6">
<label>First Name<span>*</span>
</label>
<input type="text" placeholder="First Name" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Last Name<span>*</span>
</label>
<input type="text" placeholder="Last Name" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Address Line 1<span>*</span>
</label>
<input type="text" placeholder="Address Line 1" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Address Line 2</label>
<input type="text" placeholder="Address Line 2">
</div>
<div class="col-xs-12 col-md-6">
<label>Phone Number<span>*</span>
</label>
<input type="tel" placeholder="Phone">
</div>
<div class="col-xs-12 col-md-6">
<label>City/Town<span>*</span>
</label>
<input type="text" placeholder="City" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Region/Council Area<span>*</span>
</label>
<input type="text" placeholder="Region" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Post Code<span>*</span>
</label>
<input type="text" placeholder="Post Code" required>
</div>
<div class="col-xs-12 col-md-6">
<label>Select your country<span>*</span>
</label>
<select required>
<option value="UK">United Kingdom (GB)</option>
</select>
</div>
<div class="col-xs-12">
<h1 class="delivery-title">Confirm Your Login Details</h1>
</div>
<div class="col-xs-12">
<label>Email<span>*</span>
</label>
<input type="email" placeholder="The same as setup above" class="input-50" required>
</div>
<div class="col-xs-12">
<label>Password<span>*</span>
</label>
<input type="password" placeholder="The same as setup above" class="input-50" required>
</div>
<div class="col-xs-12">
<input type="submit" value="Complete order">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope everything is clear enough, if not, comment below and I can provide any other information you may need.

Answer 1

Th answer was found by #andrewbone (https://stackoverflow.com/users/4891666/andrew-bone) in his comment answer.
The issue was that my lack of asterisk above address line 2, it was 1px too short, therefore I set all of them to have a min-height of 72px and that upped the add line 2 from 71px to 72px tall fixing the issue!
Shout out to andrew for finding that was the issue!