Bootstrap grid system works strangely - css

Question

This is my code :
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
The only thing that I changed is <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
And here is before/after :
Before I inserted col-md-6 col-md-offset-3, the blue-shaded box looks balanced.
After I inserted col-md-6 col-md-offset-3, it looks unbalanced.
Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.
Need your help.

Answer 1

Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9
I would suggest this way as I dont like using offset
<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
<div class="col-md-3 "></div>

Answer 2

Here's my take: giving it a fluid container and a couple extra rows to center things up:
<div class="container-fluid">
<div class="row">
<div class="brown-row col-md-8 col-md-offset-2">
<div class="row">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
<!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
</div>
</div>
</div>
</div>
and css:
body {
background: #634a16;
}
.brown-row {
background: #9e7623;
}
#loginbox {
margin-top: 50px
}