【CSS備忘録】Lightningでメインコンテンツとサイドバーの横幅を広げる

wordpressのlightningのスキムを利用していて、ヘッダーに対して、メインコンテンツの幅が少し狭い(左右に余白が多い)のでcssで修正した時のメモ。ついでにメインセクションとサブセクションの幅も修正。
※@media (min-width: 768px)はすでにワンコラムになっているかも・・・まあいいや

@media (min-width: 1200px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 96%;
    /* 画面幅の98%の幅に設定 */
    margin: 0 2%;
    /* 左右の余白を画面幅の2%に設定 */
    padding: 0% 2%;

    --vk-width-col-2-main: 70%;
    --vk-width-container-padding: 0px;
    --vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
  }

  .sub-section {
    margin-left: 0.5%;
    margin-top: 1%;
    padding: 0;
  }

  .main-section {
    margin-right: 0.5%;
    /* サイドバーとメインコンテンツの間の横のスペースを設定 */
    padding: 0;
  }

}


@media (min-width: 992px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 96%;
    /* 画面幅の98%の幅に設定 */
    margin: 0 2%;
    /* 左右の余白を画面幅の2%に設定 */
    padding: 0% 2%;
    --vk-width-col-2-main: 70%;
    --vk-width-container-padding: 0px;
    --vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
  }

  .sub-section {
    margin-left: 0.5%;
    margin-top: 1%;
    padding: 0;
  }

  .main-section {
    margin-right: 0.5%;
    /* サイドバーとメインコンテンツの間の横のスペースを設定 */
    padding: 0;
  }

}

@media (min-width: 768px) {

  .container,
  .container-md,
  .container-sm {
    max-width: 96%;
    /* 画面幅の98%の幅に設定 */
    margin: 0 2%;
    /* 左右の余白を画面幅の2%に設定 */
    padding: 0% 2%;
    --vk-width-col-2-main: 70%;
    --vk-width-container-padding: 0px;
    --vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
  }

  .sub-section {
    margin-left: 0.5%;
    margin-top: 1%;
    padding: 0;
  }

  .main-section {
    margin-right: 0.5%;
    /* サイドバーとメインコンテンツの間の横のスペースを設定 */
    padding: 0;
  }
}

@media (min-width: 576px) {

  .container,
  .container-sm {
    max-width: 96%;
    /* 画面幅の98%の幅に設定 */
    margin: 0 2%;
    /* 左右の余白を画面幅の2%に設定 */
    padding: 0% 2%;
  }
}