Boostrap indenting columns in row - css

Question

I am new to bootstrap. Why is the second row with 3 columns (col-sm-3, col-sm-6 and col-sm-3) being indented, the other two rows have a wider width? How can I make all rows the same width?
.header {background-color: #9933cc;}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
background-color :#33b5e5;
margin-bottom: 7px;
}
.aside {background-color: #33b5e5;}
.footer {background-color: #0099cc;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class='row'>
<div class='header'>
<h1>China</h1>
</div><!--end header-->
</div>
<div class='row'>
<div class='menu col-sm-3'>
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div><!--end menu-->
<div class='col-sm-6'>
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class='col-sm-3'>
<div class='aside'>
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class='row'>
<div class='footer'>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div><!--end footer-->
</div>
</div><!--end container-->

Answer 1

Because .col-sm-3 and .col-md-6 adds padding to the div elements.
Wrap the header and footer in col-sm-12
HTML
<div class="col-md-12">
<div class='header'>
<h1>China</h1>
</div><!--end header-->
</div>
<div class="col-sm-12">
<div class='footer'>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div><!--end footer-->
</div>
Working Fiddle
Adding .col-sm-12 class to .footer and .header div's don't change because, background-color property is applied on .header and .footer and color is applied including the padding.
Wrapping these elements (footer and header) divs in .col-sm-12 adds padding to parent elements.