innerからの脱獄

innerとはなんぞ

Webサイトでよく使われるinnerは横幅が1920とか4kとかある大型ディスプレイでサイトを開いてもページが横にびろーんと伸びすぎないようにするためのものです。
名前はwrapとかcontainer等のバリエーションもありますが目的は同じです。

.inner {
  width: 980px;
  margin: 0 auto;
}

幅はサイトによってまちまちですがだいたいこんな感じのことが書いてあります。

どうすればいいのか

元の状態

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

例えば「これをinnerの外にはみ出させたい」の部分をinnerから出して幅1200pxで表示したいとします。
しかし普通に幅1200px ＆ margin:0 auto;を指定すると右にだけはみ出すので以下のようにします。

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

margin: 0 calc((980px - 1200px)/2);

の部分がわかりにくいと思いますが左右に 1200pxと980pxの差の半分である110pxのマイナスマージンをとっています。