login form design problems in ASP MVC - asp.net-mvc

Question

I have a login form code in an ASP MVC program.
I have two problems.
1)login form is not centered.
2)form-controls are not centered in the login form. I noticed when I put borders for form-group divs they are in the center and also I put border for They put in the middle too. but I do not know why textboxes do not display in the middle of form.
<div class="row">
<div class="col-md-4 col-md-offset-4 shadow" style="background-color:#0375b4;">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-12" style="margin-top:0.75cm">
<img class="profile-img" src="~/Content/Images/avatar1.png" />
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Email, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group ">
<div class="col-md-12 ">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control ", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Password, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.PasswordFor(m => m.Password, new { #class = "form-control", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new { style = "color:white;" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
}
<div style="height:20px">
</div>

Answer 1

Create following css class
div.centered {
margin: 0 auto;
width: 800px;
}
And set it to your container division.

Answer 2

I solve centralizing of form-controls by adding a class in bootstrap.css as follow:
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
then I use this class in login form view in
<section id="loginForm" class="center_div">
and form controls set in the middle of form