CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横スクロールが発生する例 HTML <div class="container"> <div class="row"> <div class="col col-half"> <div class="content">content</div> </div> <div class="col col-half"> </div></div></div>