CSS：响应左手菜单，右栏中的内容？

Question

我正在尝试创建一个响应式布局，左侧边栏在较窄的屏幕上折叠。有点像http://purecss.io/但有一个固定的顶部标题的东西。

到目前为止我的工作（代码真的太长了，无法在此重现）：http://jsbin.com/uhalic/3/edit

我正在努力解决两个问题（请注意，您需要使HTML部分超过450px才能重现这些问题）：

（1）列表的最后一个元素正在横向移动，我无法理解。

（2）页脚应该在视觉上完全包含在#main（红色部分）中，实际上它是语义上的，但文本部分落入#sidebar（蓝色部分） 。

我做错了什么？

Answer 1

这是因为红色列的左侧没有<li>个元素，因此红色部分实际上有4个<li>个元素正在倾斜，两个元素位于每个可见的左侧一个，但被隐藏。

您需要向margin-left: 160px课程添加.results。然后删除.result的width: 100%，或者如果要保留它，请将其保留为100％。

另外，将margin-left: 200px添加到#footer