media queryで幅を指定しても元の幅の値が有効になったままになる

display-flexを使って、PC画面サイズでは、横並びにしていますが、
950px以下では縦並びにすべく、media queryの記述をしています。

ブラウザを950px以下のサイズに変更して見てみると、縦並びのCSSは効いてくれますが
width:100%という箇所が効いてくれず、PC用画面サイズのwidthのままになってしまいます。

どのように実装すれば、media query内のwidth:100%が有効になるでしょうか？
ご教示頂けますと、幸いです。

### ブラウザPC用画面サイズの記述


.content-body__architect{
    display:flex;
}
.content-body__architect__left-content{
 width:55%;
}

.content-body__architect__right-content{
  width:40%;
}

### ブラウザ950px以下の記述

 @media screen and (max-width:950px){
  
  .content-body__architect{
    display:flex;
    flex-direction:column-reverse;
  }

  .content-body__architect__left-content{
    width:100%;
  }
 
 .content-body__architect__right-content{
      width:100%;
 }
}

該当箇所をディベロッパーツールで検証した結果は
下記の通りです。media screenで指定したwidthが無効になっています。

Cojiro

2020/07/12 03:54

オリジナルのwidthのままというのは、いくつですか？ブラウザの検証や開発ツールなどをみて、どのスタイルが適用されているかを調べましたか？実際にどのスタイルが適用されているか記載してください。

paison

2020/07/12 05:19

上記ディベロッパーツールにて検証した結果の画像を追加しました。

Cojiro

2020/07/12 06:01

ありがとうございます。僕もsousukeさんの言うとおりだと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

見た感じcssの位置が悪いんじゃない？
100%は４８行目、55%は１０４行目にあるみたいだし
メディアクエリといっても「後半に上書きされる」ルールは生きているからね。

とりあえず↓はcssの最後にもっていけばいいんじゃない？

css
1 @media screen and (max-width:950px){
2
3  .content-body__architect{
4    display:flex;
5    flex-direction:column-reverse;
6  }
7
8  .content-body__architect__left-content{
9    width:100%;
10  }
11
12 .content-body__architect__right-content{
13      width:100%;
14 }
15}