CSSで４カラムを携帯で２カラムにしたい

Question

前提・実現したいこと

このサイトでデザインを調整しています。
http://eikaiwaonline.info/

ヘッダー下のエリアに、
パソコンでは４カラムの画像がならび、携帯では、２カラムの画像が並ぶようにしたいです。
よろしくお願いします。

発生している問題・エラーメッセージ

４カラムから２カラムに変形はできるけど、パソコンで見たときに、オレンジ背景の部分が1180pxになってくれない。

該当のソースコード

ヘッダー下にいれているHTML

<div id="pickup">
<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div>
<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div>
<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div>
<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div>
</div>

.header-widget{
text-align:center;
padding:0 20px;
margin: 0px auto;
background: orange;
}
@media only screen and (min-width: 1240px) {
.header-widget{width:1180px;}}
@media only screen and (min-width: 1030px) {
.header-widget{width: 92%;}}

#pickup{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:0.5em;
  margin-bottom:0.5em;
}
#pickup .pickup_post{
  width:24%;
}
@media only screen and (max-width: 767px) {
  #pickup .pickup_post{
    width:48%;
    margin-bottom:1em;
  }
}

試したこと

.header-widget{width:1180px}にすると、パソコン版は幅1180pxになってくれるが、
レスポンシブでは崩れてしまう。

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

wordpress テンプレート　Sango

Comments

[m.ts10806]

「WordPress」をタグに追加しておいてください。もしかしたらWordPress観点からの回答が得られるかもしれません。

[emiemiemi]

了解しました！

Answer 1

@media only screen and (min-width: 1240px) {
.header-widget{width:1180px;}}
@media only screen and (min-width: 1030px) {
.header-widget{width: 92%;}}

ここ逆

@media only screen and (min-width: 1030px) {
.header-widget{width: 92%;}}
@media only screen and (min-width: 1240px) {
.header-widget{width:1180px;}}

Comments

[emiemiemi]

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

Answer 2

質問の意味が汲み取れていなかったら申し訳無いのですが、
「最大幅を1180pxにし、1180px以下になると可変させる」
という意味で捉えますと、

@media only screen and (min-width: 1240px) {
.header-widget{width:1180px;}}
@media only screen and (min-width: 1030px) {
.header-widget{width: 92%;}}

上記を消し、

---

.header-widget{
    width: 100%;
    max-width: 1180px;
}

上記を加えてください。

サンプル
https://jsfiddle.net/ge27nj9o/1/

欲しい回答で無かった場合は、再度質問の仕方を変えて頂けると助かります。

Comments

[emiemiemi]

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