### 前提・実現したいことこのサイトでデザインを調整しています。 http://eikaiwaonline.info/ ヘッダー下のエリアに、パソコンでは４カラムの画像がならび、携帯では、２カラムの画像が並ぶようにしたいです。よろしくお願いします。 ### 発生している問題・エラーメッセージ ``` ４カラムから２カラムに変形はできるけど、パソコンで見たときに、オレンジ背景の部分が1180pxになってくれない。 ``` ### 該当のソースコードヘッダー下にいれているHTML ```HTML

``` ```CSS .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

質問編集履歴