Bootstrap form alignment, won't pull right - css

Question

I have a form that does not want to align itself.
I have tried to show lines how I want the alignment on the attached image, hope it helps.
I want the right hand textboxes to pull-right (as per the blue line on the image, does not work when i add it to the class), and the drop down boxes to fill so that they are the same size as the textboxes (as per the green lines on the image).
Code below :)
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<div class="form-inline">
<div class="form-group row">
<div class="col-md-6">
<asp:TextBox ID="txtFirstname" runat="server" CssClass="form-control loan-form-textbox" placeholder="förnamn"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="txtLastname" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="efternamn"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control loan-form-textbox" placeholder="personnummer"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="email"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control loan-form-textbox" placeholder="hemnummer"></asp:TextBox>
</div>
<div class="col-sm-6">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="mobilnummer"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddCivilstand" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Gift" Value="1"></asp:ListItem>
<asp:ListItem Text="Singel" Value="2"></asp:ListItem>
<asp:ListItem Text="Skild" Value="3"></asp:ListItem>
<asp:ListItem Text="Änka/Änkeman" Value="4"></asp:ListItem>
<asp:ListItem Text="Separerad" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddEmploymentType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="0"></asp:ListItem>
<asp:ListItem Text="Fast anställd" Value="1"></asp:ListItem>
<asp:ListItem Text="Egen företagare" Value="2"></asp:ListItem>
<asp:ListItem Text="Visstidsanställd" Value="3"></asp:ListItem>
<asp:ListItem Text="Pensionär" Value="4"></asp:ListItem>
<asp:ListItem Text="Student" Value="5"></asp:ListItem>
<asp:ListItem Text="Arbetslös" Value="6"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddChildren" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddAccomnodationType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="1"></asp:ListItem>
<asp:ListItem Text="Hyresrätt" Value="2"></asp:ListItem>
<asp:ListItem Text="Bostadsrätt" Value="3"></asp:ListItem>
<asp:ListItem Text="Inneboende" Value="4"></asp:ListItem>
<asp:ListItem Text="Villa/Radhus" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control loan-form-textbox" placeholder="boendekostnad"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:Button ID="btnApply" runat="server" Text="Ansök nu" CssClass="btn btn-primary pull-right" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Bootstrap columns have padding on right and left sides, this means that aligning to the right will not be at the edge. to align to the right edge, add style="padding-right: 0;" to elements you need pulled right (it would be better if you use a class rather than inline code .col-pull-right{padding-right: 0;}
The box sizing problem should be solved by removing form-inline class at
<div class="form-inline">
Here the full code. Note i have used final html elements for the code above.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<!-- can be replaced by col-md-offset-2 on element below it -->
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<!-- remove class form-inline from here -->
<!--<div class="form-inline"> -->
<div>
<div class="form-group row">
<div class="col-md-6">
<input ID="txtFirstname" class="form-control loan-form-textbox" placeholder="förnamn"/>
</div>
<div class="col-md-6">
<input ID="txtLastname" class="form-control loan-form-textbox pull-right" placeholder="efternamn"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox3" class="form-control loan-form-textbox" placeholder="personnummer"/>
</div>
<div class="col-md-6">
<input ID="TextBox4" class="form-control loan-form-textbox pull-right" placeholder="email"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<input ID="TextBox1" class="form-control loan-form-textbox" placeholder="hemnummer"/>
</div>
<div class="col-sm-6">
<input ID="TextBox2" class="form-control loan-form-textbox pull-right" placeholder="mobilnummer"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px; padding-right: 0">
<div class="col-sm-6">
<select ID="ddCivilstand" class="form-control loan-form-textbox">
<option value=""> Gift</option>
<option value=""> Singel</option>
<option value=""> Skild</option>
<option value=""> Änka/Änkeman</option>
<option value=""> Separerad</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddEmploymentType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Fast anställd</option>
<option value=""> Egen företagare</option>
<option value=""> Visstidsanställd</option>
<option value=""> Pensionär</option>
<option value=""> Student</option>
<option value=""> Arbetslös</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<select ID="ddChildren" class="form-control loan-form-textbox">
<option value=""> 1</option>
<option value=""> 2</option>
<option value=""> 3</option>
<option value=""> 4</option>
<option value=""> 5</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddAccomnodationType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Hyresrätt</option>
<option value=""> Bostadsrätt</option>
<option value=""> Inneboende</option>
<option value=""> Villa/Radhus</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox5" class="form-control loan-form-textbox" placeholder="boendekostnad"/>
</div>
<div class="col-md-6">
<button ID="btnApply" class="btn btn-primary pull-right">Ansök nu</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>