【ワードプレス】記事一覧をCSSで２列から４列にしたい

Question

前提・実現したいこと

ワードプレスでこちらのテーマを使用しています
https://jin-demo.jp/demo-2/

デフォルトでは「記事の一覧（サムネイル）が２列」＋「サイドバー」という２カラム構造になっています。
２カラムのまま、
トップページ（ならびにカテゴリー一覧ページ）のサムネイル記事を
PC画面の時だけ４列のサムネイルにしたい。

↓イメージ図

発生している問題・質問内容

該当箇所（現在のコード）がわからないので教えて欲しい。
※現在のコードさえわかれば、あとは数値だけ自分で変えて、調整します。

試したこと

下記が該当箇所かと思って、追加CSSに貼り付けて、
素人考えで400%を200%にしてみたのですが変化がありませんでした。
場所そのものが違うようです。

.toppost-list-box-inner {
width: 400%;
transition: 0.6s;
text-align: left;
overflow: hidden;
}

chromeの「検証」でそれらしき箇所を探していますが
どうも、該当箇所にまでたどり着けず、質問させていただきました。

補足情報（FW/ツールのバージョンなど）

バージョン5.2.3

Answer 1

追加CSSなら、下記のような感じでいいのでは。

@media (min-width: 768px) {
  .post-list-mag {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .post-list-mag .post-list-item {
    margin-right: 0;
    width: 24%;
  }
}

flexを使っているので、幅を25%以下にすれば4列になります。
marginを0にして、justify-content: space-between; を親に設定すれば、余白は均等に調整してくれます。

Comments

[imatya999]

できました！ありがとうございました！

Answer 2

  @media (min-width: 768px) {
    .post-list-mag .post-list-item,
    .post-list-mag3col .post-list-item,
    .post-list-mag-sp1col .post-list-item {
      width: 48.5%;
      margin-bottom: 20px; } }

↑ここ

ただし偶数番目はマージンを変えるというのもしているのでそこも調整