innerからの脱獄2

padding: 0 calc(50vw - 50%);
margin: 0 calc(50% - 50vw);

をつけます。何をしているかというと
例えばディスプレイの画面幅が1920px　広げたい要素の横幅が980pxだとすると

• margin： 980pxの50%で490px - 1920pxの半分の960px = -470px　左右に470pxのマイナスマージンをとる。つまり横幅が470px×2 だけ広くなる
• padding： 960px - 490px = 470px　左右に470pxの余白ができる (NormalizeCSSの影響で box-sizing: border-box; が適用されている)

→中身の領域は変えず、背景だけを画面幅いっぱいにすることができるわけです。
中身も含めて画面幅いっぱいにしたい場合は padding: 0 calc(50vw - 50%); を消すだけで修正できます。

活用例

タイトルの装飾を左端または右端まで伸ばす

See the Pen
OJVMJpG by sphenisc (@sphenisc)
on CodePen.