Bootstrap3 mvc 5 - center form div - html

Question

I have a headache from this design.
How I can separate a little bit in inline form label and textbox which belongs to form-control class.
I've tried everything, and margin and align-text, but I didnt find solution
Here is a photo:
Here is the code:
<div class="container">
<div class="row">
<div class="span9">
<br />
<h2 style="margin-top:100px;text-align:center">
APPLY FOR INTERNSHIP PROGRAM
</h2>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-4">
<br />
<div class="form-group">
#Html.LabelFor(model => model.Name, "Name", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, "Surname", htmlAttributes: new { #class = "control-label col-md-2 col-md-2 col-sm-2" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Location, "Location", htmlAttributes: new { #class = "control-label col-md-2" })
#*#Html.DropDownList("LocationID", null, "--Choose location--", new { #class = "form-control" })*#
#Html.DropDownListFor(model => model.LocationID, ViewBag.LocationID as IEnumerable<SelectListItem>, "-----Select Category-----", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Location, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Mail, "E-mail", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Mail, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Mail, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Telephone, "Telephone number", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Telephone, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartEduYear, "Entrance study year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.StartEduYear, ViewBag.StartYearFaculty as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StartEduYear, "", new { #class = "text-danger" })
</div><br />
<div class="form-group">
#Html.LabelFor(model => model.EnglishLang.NameLang, "English level", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownList("EngID", null, "--Choose level--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.EngID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Faculty.FacultyName, "Faculty", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.FacultyID, ViewBag.FacultyID as IEnumerable<SelectListItem>, "--Select a faculty--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.FacultyID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.AvgScore, "Average score", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.AvgScore, ViewBag.AverScore as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AvgScore, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.GradYear, "Graduation year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.GradYear, ViewBag.GradYear as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.GradYear, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.WExp, "Work Experience", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.WExp, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WExp, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Interests, "Interests", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Interests, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Interests, "", new { #class = "text-danger" })
</div>
<span>Did you have any additional trainings?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvPassport" style="display: none">
#Html.LabelFor(model => model.Trainings, "Trainings", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Trainings, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Trainings, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Did you have any projects recently?</span>
<label for="chkYes">
<input type="radio" id="chkYes1" name="chkPassPort1" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo1" name="chkPassPort1" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample" style="display: none">
#Html.LabelFor(model => model.Projects, "Projects", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Projects, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Projects, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Have you been in some students organization?</span>
<label for="chkYes">
<input type="radio" id="chkYes2" name="chkPassPort2" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo2" name="chkPassPort2" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample1" style="display: none">
#Html.LabelFor(model => model.StudOrg, "Organizations", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.StudOrg, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StudOrg, "", new { #class = "text-danger" })
</div>
<p></p>
<input type="submit" value="Apply" class="btn btn-default" style="text-align: center" />
</div>
#*<div class="form-group">
sdsdsdsd
<div class="g-recaptcha" data-sitekey="6LccVRcTAAAAADLo_LxSj4mQzt9jLrgbo5L9wZ-J"></div>
<div>sdsdsds11
#if (TempData["recaptcha"] != null)
{
<p>#TempData["recaptcha"]</p>
}
</div>
</div>*#
#*<div class="col-md-offset-2 col-md-10">
<div class="form-group">1231
#Html.Recaptcha()
</div>
</div>*#
</div>
</div>

Answer 1

I think you need to take another look at Bootstrap documentation. If you're using Bootstrap 3.x, you should not be using span* (that belong to Bootstrap 2.x). span* have been replaced with col-md-*.
You can refer to this migration guide.
Also, you should place all of your .form-group elements inside a .form-horizontal container.

Answer 2

You're simply not giving the elements enough room. Your form is restricted to 4 columns and then your label is restricted to 2 columns. Essentially, the form is 4/12 of the total available width, then your label is 2/12 of that, which means overall your label is only 1/18 of the total available width. Just give it some more breathing room. Perhaps make your form col-md-6 or col-md-8 and your label something like col-md-3. Or if you want to stick with col-md-4 for the whole form, increase your label to something like col-md-4.