Formatting on form not enough room for labels - asp.net-mvc

Question

I am new to mvc I am having some styling issues here with my form for some reason. I dont appear to have enough room for my text labels and its being squashed full screen.
I do not no if begin form would mess with the styling or not but having a real issue here.
<div class="col-xs-12 col-sm-12">
#using (Html.BeginForm("Step1", "Forms", FormMethod.Post, new { #class = "form-horizontal" }))
<h4>Health Check - Personal Details</h4>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("First Name", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="firstName" name="firstName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Middle Name", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmiddleName" name="txtMiddleName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Surname", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtLastName" name="txtLastName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Saluation", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtSaluation" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Aliases", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtAliases" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Maritial Status", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Address 1", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtAddress1" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Address 2", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtAddress2" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("City", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Post Code", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("County", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtCounty" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Country", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Date Of Birth", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
#(Html.Kendo().DatePicker()
.Name("datepicker"))
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Home Tel No", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Home Work No", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtmStatus" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Fax No", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtFaxNo" name="txtFaxNo" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-xs-3 text-right">
#Html.Label("Mobile No", new { #class = "col-md-2 control-label" })
</div>
<div class="col-xs-9">
<input id="txtMobile" name="txtMobile" class="form-control" type="text" />
</div>
</div>
<button type="submit" id="btnSave">Save</button>
Answer 1 works ok for full screen but when mobile it shows as this

Answer 1

#Html.Label("Surname", new { #class = "col-md-2 control-label" })
renders
<label class="col-md-2 control-label">Surname</label>
So, you are nesting a .col-md-2 inside a .col-xs-3.
If you see form-horizontal docs
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
So you can try something like this for each .form-group
<div class="form-group">
#Html.Label("Surname", new { #class = "col-md-3 control-label" })
<div class="col-md-9">
<input id="txtLastName" name="txtLastName" class="form-control" type="text" />
</div>
</div>