レスポンシブ レイアウトを作成しようとしています。左側のサイドバーは狭い画面では折りたたまれます。http://purecss.io/に少し似ていますが、上部ヘッダーも固定されています。
これまでの私の作業 (ここで再現するにはコードが長すぎます): http://jsbin.com/uhalic/3/edit
修正に苦労している問題が 2 つあります (注意: これらを再現するには、HTML セクションを 450px より広くする必要があります)。
(1) リストの最後の要素が横にずれています。理由はわかりません。
(2) フッターは (赤いセクション) 内に視覚的に完全に含まれている必要があります。#main実際、意味的にはそこにありますが、テキストの一部が#sidebar(青いセクション) に収まっています。
私は何を間違っていますか？