移动端css页面 padding和box-sizing:border-box

Question

左边实现 我的需求，右边没实现 。
以上的图就可以看出 margin:0 30px 左边已经实现需求，右边没实现 。右边不能对边是怎么实现的？

    .line{
        height:2px;
        background: #000;
        width: 100%;
        margin:0 30px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

如何让一条直线不对边？
http://jsbin.com/yucoyukuqi/edit?html,css,js,output

Answer 1

第一种方法是：
http://jsbin.com/manigerijo/edit?html,css,js,output
第二种方法：
http://jsbin.com/bicibipeti/edit?html,css,js,output

Answer 2

.line样式的width:100%删掉

Answer 3

div是块级元素，本身占一行，加100%不是对此一举，除非你想把它变成行内元素用

Answer 4

border-box改为content-box。
或者 margin 改为padding