幅を合わせるためにネガティブマージンを駆使

これはもう、おもっくそ元のサイトをまるまる参考にしたのですが

.container {
  padding: 0 20px;
  @media (max-width: 780px) {
    padding: 0 15px;
  }
}

.news {
  margin-top: 40px;
  &Container {
    @media (min-width: 781px) {
      display: flex;
      margin-right: -12px;
      margin-left: -12px;
    }
  }
  &Item {
    @media (min-width: 781px) {
      width: calc((100% / 3) - 24.4px);
      margin: 0 12px 40px;
    }

あらかじめ、paddingで左右に余白があるうえで flex:box で3つブロック横並びにして marginでそれぞれのブロックを均等に並べるため余白おきたいとき

margin-right/left で　12px指定すると paddingで余白とってる分+12pxになるので、見た目が揃わなくなる

なので　display:flex指定している親ボックスで margin-right/left -12px　すると、画面の左端右端のmargin12px分がなくなるので、ちょうどよくなる

calcのとこ　なんで-24.4px 引いてるのかはちょっとわかんないけど なんかちょうど良くなるのかな・・・