Twenty Elevenのﾃﾞﾌｫﾙﾄの動作ですが､ﾚｽﾎﾟﾝｼﾌﾞﾃﾞｻﾞｲﾝによって800px幅以下の時はfloatが解除され､ﾒｲﾝｺﾝﾃﾝﾂとｻｲﾄﾞﾊﾞｰの幅がそれぞれ自動で調整されます｡(※｢@media (max-width: 800px) { ? }｣内に指定されています｡)
ｻｲﾄﾞﾊﾞｰの表示場所も上記の指定によって本来は無くなるのですが､余白としてそのまま残るのは､元々の原因が｢#primary｣に幅を指定した事ですので､元の100%に戻した方がいいと思います｡
合わせて｢#content｣と｢#secondary｣を調整します｡

#primary {
float: left;
margin: 0 -25.4% 0 0;
width: 100%;
}

#content {
margin: 0 29.4% 0 5.6%;
width: auto;
}

#secondary {
float: right;
margin-right: 4.6%;
width: 20.8%;
}

※上記の例では｢#secondary｣の幅として｢25.4%｣必要ですので､｢#primary｣の右余白として｢-25.4%｣を指定します｡
※記事本文の余白は､｢#content｣の左右の余白で調整します｡(※25.4%ではｻｲﾄﾞﾊﾞｰと接触してしまいますので､少し値をﾌﾟﾗｽして調整します｡)


※上にも書きましたが､｢#primary｣に幅を指定した事が原因ですので､800px以下の時には｢#primary｣の幅指定を解除して100%にする事でも対処可能です｡(※ただし､ﾃｰﾏ本来の手法に沿って上記の方法で調整した方がいいと思います｡)

@media (max-width: 800px) {
#primary {
width: 100%;
}
}