为什么我的标题在引导程序代码中与我的页脚不对齐？

Question

我尝试了很多，但无法修复它。我无法对齐页眉和页脚。

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

我在下面给出了自定义css代码的布局

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;
}

但是当我将以下标题部分添加到自定义CSS代码时，我得到以下布局

header{
    background-color: #333;

}

Answer 1

在css文件中添加此样式

header.container {
  padding: 0;
}

Answer 2

像这样修改

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