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

i tried lot, wasn't able fix it. not able align header , footer.

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

i layout 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 add following header part custom css code, following layout

header{     background-color: #333;  } 

add style in css file

header.container {   padding: 0; }