【CSS】子要素を親要素の幅を超えて画面幅いっぱいにする方法

親要素に依存せず子要素を画面幅いっぱいに表示したい場合は「vw」と「calc」を利用すると実現できます。

<style>
.pr{
	width: 400px;
	background-color: #ccc;
	margin:0 auto;
}
.ch{
	margin-left: calc( ( 100% - 100vw ) / 2 );
	margin-right: calc( ( 100% - 100vw ) / 2 );
	background-color: #afa;
}
</style>

<div class="pr">
<div class="ch">
</div>
</div>

<style>

.pr{

width: 400px;

background-color: #ccc;

margin:0 auto;

}

.ch{

margin-left: calc( ( 100% - 100vw ) / 2 );

margin-right: calc( ( 100% - 100vw ) / 2 );

background-color: #afa;

}

</style>

</div>

注意点

親要素の幅が画面幅より広くなった場合、子要素が想定した幅にならない可能性が高いので、別途レスポンシブなデザイン（CSS）が必要になります。

vwはスクロールバーの幅を考慮しないので、スクロールバーが表示された場合はレイアウトが崩れてしまいます。
そのため、常時スクロールバーが表示するようにしてスクロールバーの幅を考慮したマージンを設定する等の対策が必要になります。
（対応例）

<style>
html {
	/* スクロールバーを常に表示 */
	overflow-y: scroll;
}
.pr{
	width: 400px;
	background-color: #ccc;
	margin:0 auto;
}
.ch{
	margin-left: calc( ( ( 100% - 100vw ) / 2 ) + 8px );/*スクロールバーの幅を考慮（+8px）*/
	margin-right: calc( ( ( 100% - 100vw ) / 2 ) + 8px );/*スクロールバーの幅を考慮（+8px）*/
	background-color: #afa;
}
</style>

<div class="pr">
<div class="ch">
</div>
</div>

<style>

html {

/* スクロールバーを常に表示 */

overflow-y: scroll;

}