Bootstrap Grid Left Margin Not Aligning - html

Question

I'm not sure if this is a bootstrap bug or I am just not understanding the grid system. I would like the two headers (This Guy, That Guy) to align:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>This Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>That Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've been playing around with the grid system and in the bottom panel and column widths 1-7 all align the left margins but 9+ column width has a different left alignment.
So my question: Is there a way to align the contents of 6 and 12 column width rows in different panels using Bootstrap 3?

Answer 1

I think you're going to have to make your own offset class to make this work.
Every time you start a new row your starting a new column context of 12 columns. Your This Guy text is a 10 wide column offset by 1 inside of a 6 wide column. Your That Guy text is also a 10 wide column offset by 1 but it is inside of a 12 wide column. Bootstrap uses percentages so the size of .col-md-offset-1 will be different since the containers that .col-md-10 .col-md-offset-1 are in are different sizes.
Solution: create your own offset class, something like .col-md-offset-0-5.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#media ( min-width: 992px ) {
.col-md-offset-0-5 {
margin-left: 4.1666666%;
}
}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h3>This Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-md-offset-0-5">
<h3>That Guy</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>