最主要的原因還是我對盒子模型理解的不夠。
盒子大小最為重要的2個部分就是padding和內容content。
當我們設置width是在設置content的大小，百分比的時候它參照的是父元素的content的大小。
父元素content的大小（即width）為100px，子元素用百分比的時候100%就是100px。
上述聯系下。
如果父元素width設置為100%剛好撐滿整個設備屏幕，如果這個時候子元素width還是設置為100%；
同時，父元素用了padding，那就要出事了。會有橫向滾動條。
元素的盒子去渲染的時候，是先確定下來content的大小，再去弄padding的大小。整個由盒子的內部向外部計算渲染。
如果content是100%了，它又要想辦法去弄padding來滿足你，那對不起了，來個橫向滾動條把，或者整個元素的邊界擴張了。
太晚了我想睡覺了。
總之，想用padding來限制內容大小或者子元素的時候，父元素不要設置width，如果width設置了就意味着content肯定是不變的，完全和我們的想法矛盾了，父元素自身設置好padding就行了，下面子元素的寬度設置為100%。