子要素の幅を親要素幅より大きくしたい

まだ未解決だけど分かったことだけ記す

とりあえず、下記2行を子要素に指定すればいいらしい

1. margin: 0 calc(50% - 50vw);
2. width: 100vw;

CSS 子要素を親要素よりはみ出して全体表示にするには – 魔王様、フロントエンドエン

ジニアを目指す

で、横スクロールバーを表示させないために祖父要素に下記2行を指定

1. position: relative;
2. overflow: hidden;

追記

最終的にこの形がシンプルでまだ分かりやすいかなぁ

.full {
	background: #26a69a;
	margin: 0 calc(50% - 50vw);
	padding: 4px calc(50vw - 50% + 8px);
	width: 100vw;
}

.content {
	overflow: hidden;
}

子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS | HPcode（えいちぴーこーど）

width: 100vwはスクロールバーの幅を含むらしいのでoverflow: hiddenが必要らしい