css - 水平スクロールバー付きのcss

Question

メイン スタイル シートにこの CSS があり、この CSS から水平スクロール バーを削除できます。

html, body, #wrap {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:Calibri;
}
#wrap {
    height: auto;
    min-height: 100%;
}

/* header stuff */
#header-topbar {
    width:100%;
    height:30px;
    padding:10px 10px 10px 10px;
    background-color:#666666;
}
#header-topbar2 {
    width:100%;
    height:80px;
    padding:10px 10px 10px 10px;
    background-color:#eeeeee;
}
#phone-tel {
    position:block;
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:0px;
}

/* main body/content */
#body-content {
    padding-bottom:200px;
    width:70%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/*footer */
#footer .column {
    margin-top:-200px;
    clear:both;
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

width:100% を本文、html、および padding:0 と margin:0 に追加しようとしましたが、まだ機能しません

Answer 1

問題は、要素の幅を 100% に設定してから、パディングを設定してそれに追加していることです。box-sizingこれらの要素にtoを設定するborder-boxと、パディングが幅の内側に入ります (ただし、IE7 では機能しません)。または、これらの要素内に要素を追加して、パディングを設定することもできます。

* {
    box-sizing: border-box;
}

http://jsfiddle.net/ryanbrill/mxk4T/

のブラウザ サポートについては、 http://caniuse.com/#search=box-sizingbox-sizingを参照してください。

Answer 2

汚い修正

  html, body, #wrap {
    overflow-x:hidden;
    }

jsFiddle の例