Can't get dashboard fit into container on TB template - css

Question

I'm trying to build a template using Twitter Bootstrap. Here is the live example. The problem I'm having is I can get positioned dashboard div next to sidebar menu and I don't know where my mistake is? Can I get any help from experts? This is the HTML:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
Menu
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
dashboard
</div>
</div>
</div>
And this are the styles:
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}

Answer 1

Basically you were offsetting your columns to go beyond the actual grid that Bootstrap offers (the normal grid only has 12 columns but you were extending to, at most, 15 with the offsets). Basically, just beware of going beyond the normal column boundaries and don't use an all around padding, it was shifting one column but not the other.
Take the following out of your code to make it re-align:
CSS:
.main {
/* padding: 20px; */
}
Then rearrange your HTML to the following:
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
Menu
</div>
<div class="col-sm-9 col-md-10 main">
dashboard
</div>
</div>
</div>
DEMO JSFiddle
References:
I'm sure you have seen this before but it never hurts to overlook it again. Bootstrap offers an awesome example of how to use their grid system here.