布局溢出问题

前言：

今天仿造慕课网写网页时，就要大功告成了，除了一个问题，就是浏览器右边出现了一小段空白，且横向出现了滚动条，这肯定是哪个元素超过了浏览器的默认宽度，具体bug如下图：

bug出现的原因

内部元素宽度撑开了页面。比如说宽度设置100%，然后你又来了个margin，那就gg.

解决办法有两种

1.溢出的设置隐藏

在css代码中：

html{
   width:100%;
   overflow-x:hidden;
}

2.找出溢出元素(~是不是想揍我~2333~

• F12(window)打开调试，挨个删除元素，看看删除那一个元素的时候，横向滚动条会消失，什么？那么多元素删到什么时候？滚犊子~还不是你自己挖的坑(：~手动滑稽
  你可以先看外围body下的元素呀，先外围，确定好那个之后，再深入去找，不是省时间吗！当然了，下面有一个更直观的方法，我不小心在知乎看到的！可怕~知乎真是大神众多~~~
• 打开你的html，打开Console(控制台)贴上如下代码：

[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

回车，你会看到不一样的html~可怕~
看下我的bug，展现的是直观：

最右边那个绿色框飞出去了一小部分，还有下面，嘻嘻~
好了，看完去修复你的bug吧。