My login form is designed with a simple layout using Bootstrap 3.3.7 and a wrapper class div. However, when viewed on a full browser screen, the text boxes overlap the labels. How can I adjust it so that the default bootstrap behavior is applied to the form elements?
HTML
<div class="container body-content">
<div class="infobox">
<div class="row">
<section id="loginForm">
<form action="" class="form-horizontal" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="Email">Email</label>
<div class="col-md-10">
<input class="form-control" id="Email" name="Email" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Password">Password</label>
<div class="col-md-10">
<input class="form-control" name="Password" type="password" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
</div>
</div>
</div>
</form>
</section>
</div>
CSS (.infobox)
.infobox {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}