Input form alignment incorrect - html

Question

I'm a beginner when it comes to CSS styling. Can anyone tell me why the surname input box is aligned differently (not left aligned to the 'surname' section) and why the payroll id input box - while much closer - still has a gap between the text box and the 'payroll #' panel? The HTML is exactly the same for both input boxes?
Code as per edit suggestion:
<div class="round-div" style="border:2px solid #428bca;">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="admin-wall">
<div class="container text-center">
<div class="row">
<img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/australianpharmaceuticalindustrieslogoh.png" />
</div>
<span class="border border-info">
<h1 style="color:#428bca;font-weight:bold">We Love Your Work</h1>
<h4>"Celebrating our people for demonstrating safety, health & wellbeing and our values"</h4>
<div class="panel-info">
<div class="panel-body">
<div class="row">
<div class="input-group">
<span class="input-group-addon" id="inputSurname">Surname</span>
<input type="text" class="form-control" placeholder="Smith" aria-describedby="inputSurname">
</div>
</div>
<div class="row">
<div class="input-group">
<span class="input-group-addon" id="inputPayrollId">Payroll #</span>
<input type="password" class="form-control" placeholder="53677" aria-describedby="inputPayrollId">
</div>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/wlyw_footer.png" />
</div>
<div class="row">
<h6><small><asp:Label ID="Lblversion" runat="server"></asp:Label></small></h6>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

Use This
<div class="container">
<div class="input-group col-md-12">
// Do Your First Input Group
</div>
<div class="input-group col-md-12">
// Do Your Second Input Group
</div>
</div>