bootstrap3で右端に余白があいてしまうとき、
いつもはbodyか一番外側のdivにoverflow-x:hidden;を付けて直していたのだけれど、
今回はそれでも直らなかったので、検索すると下記の記事がとても参考になりました。
『bootstrap3』タブレット・スマホサイズで横幅がはみ出すトラブル
私はiPad miniでサイトを閲覧したときのみ右側に余白があいてしまっていました。
（PCやiphoneやAndroidスマホでは余白あかない。）
原因は下記２つ。
- 「container」の中で、「row」が「row」の入れ子になっている。
- 「container」と「row」のpaddingをいじっている。
[php]
<div class="contaiter">
<div class="row">
<div class="row">
<p>rowの中にrowを入れてはいけない。。</p>
</div>
</div>
</div>
[/php]
↑こんな風になっているとアウト！
パーツ（ヘッダー、フッター、サイドバー、メインコンテンツ）ごとにphpファイルを分けているので全体が分かりにくかったのですが、「ブラウザで右クリック→ページのソースを表示」で全部のソースをコピーしてテキストエディタで見てみると、何か所かrowの中にrowを入れていました。
containerには左右にpaddingが15pxずつ、rowには左右に-15pxずつpaddingがきいていて、そのおかげでいい塩梅にしてくれているみたい。ですが、なぜかcontainerの「padding-left」に「1px!important」の記述が！犯人は私だと思いますがこのせいで左右のパディングのバランスが崩れてしまっていたようです。そのため、containerのpaddingを左右「15px!important」とすると直りました。
というわけで、神様のような記事に出会ったおかげでお腹が痛くならずにすみました(*’ω’*)わーい！
もしも右側に余白ができてしまって、overflow-x:hidden;で直らないときは・・・・・
1.rowの入れ子
2.containerとrowの左右のpaddingの値は15pxと-15px！
で解決だ！