Why is my header not aligned with my footer in bootstrap code?

Question

I tried a lot, but wasn't able to fix it. I am not able to align the header and footer.

JSFIDDLE: http://jsfiddle.net/80hrz44f/

I get this layout for the custom css code given below

body{
    font-family: 'Sorts Mill Goudy', sans-serif;
    padding-top: 40px;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  font-family: 'Sorts Mill Goudy', sans-serif;
  color: #ddd;

 }

.navbar .navbar-collapse {
  text-align: center;
  font-family: 'Sorts Mill Goudy', sans-serif;
  color: #ddd;
}

@media (min-width: 1200px) {
    .container{
        max-width: 850px;
    }
}

header{
    background-color: #333;

}

footer{
    background-color: #333;
    color: #ddd;
    padding: 20px;
    text-align: center;
}

aside{
    background-color: #0000;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

But when I add the following header part to the custom CSS code, I get the following layout

header{
    background-color: #333;

}

Answer 1

modify like this

.container
{
 padding-left:0; //in your code 15px;
 padding-right:0; //in your code 15px;
}
.navbar
{
margin-bottom:20px; // remove this
}

Answer 2

Add this style in your css file

header.container {
  padding: 0;
}