【CSS】ページの一部のセクションを親要素より広く表示させる。

サイトの制作やLPで、親要素より幅を広くしたり全幅で表示させたい場合があります。その際の、CSSの記入方法です。

親要素

.container {
  width:1200px;
}

上記のようにwidthが1200pxですが、それより超えて表示させたい場合などです。

対処法１

子要素

.inner {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #ddd;
  position: relative;
}

対処法２

子要素

.inner{	
    margin-left: calc( ( 100% - 100vw ) / 2 );
    margin-right: calc( ( 100% - 100vw ) / 2 );
    background-color: #ddd;
}