幅いっぱいに表示させたい

質問

Bootstrapで以下のように作成した時、id="kore"の部分はcontainerの幅分しか背景色が表示されません、両端の余白分。
「h1サンプル」や「<p>いいい」の位置は変えずにid="kore"の背景色だけ幅いっぱいに表示させる方法はありますか？（サンプル、あああ、いいいの文字位置もそのままで）。

色々試したのですが・・・出来ず、困っています。
---
<div class="container-fluid">
<div class="container">
<h1>サンプル</h1>
<p style="background-color:red;" id="kore">あああ</p>
<p>いいい</p>
</div>
</div>

回答No.1

4017B

Default設定の場合は p 等のブロック要素の横幅は width:100%; に初期設定が設定されています。それが無効化されると言う事は、恐らく親要素のdivの .container-fluid か .container のどちらかに横幅指定がある場合、子要素の p#kore はそれ以上には横幅を持つ事は出来ません。或いはその Bootstrap とやらの方で勝手に初期設定値を決めてしまっているのかも。

とりあえずは、

#kore { width: calc(100vw - 8px); }

～みたいなスタイル設定を新たに割り振れば、p#kore がブラウザの見た上での横幅いっぱいに広がると思います。もちろん直書きで <p id="kore" style="background-color:red;width: calc(100vw - 8px);">あああ</p> としてもOKです。

P.S.
横幅指定値に -8px を付け足してるのは 100vw だけだとそれ以外の要素との関係性によっては少しはみ出してしまい、不格好な「横スクロールバー」が表示されるのを回避するハックです。最適な数値は環境によって異なるので、適当に調整してみてください。