css - .container が全高をカバーしていない

Question

スクリーンショットで説明するのが最善です。これは私のアプリケーション レイアウト (レール) です。

http://i.stack.imgur.com/gzPgy.png

そして、ここに問題があります：

http://i.stack.imgur.com/LtgNG.jpg

ヘッダーのすぐ下にある色付きの bg は .main クラスで、ヘッダーからサイト全体をカバーしたいと考えています。なぜそこに固定された高さに押し込まれるのか、私にはよくわかりません。CSS:

/* Global Styles */
html,
body {
    height: 100%;
}

/* Structure styles (footer css) */
.container, .main {
  height: 100%;
}

.main {
  background-color: #f4f4ec;
  padding-top: 20px;
}

助けてくれてありがとう