CSSのメディアクエリでボックスの背景色を全て変更したいが一部しか適用されない

Question

メディアクエリを利用して、添付①のような形を実現したいのですが、添付②のようにGoodafternoonの文字の周りだけしか色が付きません。
全ての背景に色を適用するにはどのようにすればよいでしょうか？

以下記載したCSS

.w-50 {
    width: 50%;
}

.d-flex {
    display:flex;
}

.direction-column {
    flex-direction: column;
}

.align-items-center {
    align-items: center;
}

.text-center {
   text-align: center;
}

.bg-blue {
    background: #74b9ff;
}

.bg-red {
    background: #fab1a0;
}

@media (min-width: 768px) and (max-width:992px) { 
    .morning {
        width:500px;
        }
}
@media (min-wdth:992px){
    .morning{
        width:30%;
    }
}
@media (min-width: 768px) and (max-width:992px) { 
    .afternoon {
        background:#55efc4;
        }
}
@media(min-width:992px){
    .afternoon{ 
       background: #bdc3c7;
    }
}

以下記載したHTMLリンク内容

<div class="d-flex direction-column align-items-center">
    <div class="bg-blue text-center">
        <p>Hello</p>
    </div>
    <div class="bg-blue text-center w-50">
        <p>Recursion</p>
    </div>

    <br>
           
    <div class="bg-red text-center">
        <p class="morning">Good Morning</p>
    </div>

    <br>

    <div class="bg-red text-center">
        <p class="afternoon">Good afternoon</p>
    </div>
</div>

画像①（実現したい）

画像②（自分で作成したもの）

Comments

[RiaFeed]

一番最後の閉じ波括弧が全角ですけど・・・

Answer 1

やりたいことが不明瞭ですが、
Goodafternoonの文字の周りの背景色ではなく、親のdiv要素の背景色を変化させたいということなら、
その親要素にclassを設定し、それに対してCSSを設定すればいいでしょう。

<div class="d-flex direction-column align-items-center">
    <div class="bg-blue text-center">
        <p>Hello</p>
    </div>
    <div class="bg-blue text-center w-50">
        <p>Recursion</p>
    </div>

    <br>
           
    <div class="bg-red text-center">
        <p class="morning">Good Morning</p>
    </div>

    <br>

    <div class="bg-responsive text-center">
        <p class="afternoon">Good afternoon</p>
    </div>
</div>

.bg-red, .bg-responsive {
    background: #fab1a0;
}

@media (min-width: 768px) and (max-width:992px) { 
    .morning {
        width:500px;
        }
}
@media (min-wdth:992px){
    .morning{
        width:30%;
    }
}
@media (min-width: 768px) and (max-width:992px) { 
    .bg-responsive {
        background:#55efc4;
        }
}
@media(min-width:992px){
    .bg-responsive { 
       background: #bdc3c7;
    }
}

Answer 2

こちらがCSSの全体です。

Comments

[hatena19]

質問は編集できますので、質問を編集して追記してください。
また、CSSコードは画像ではなくコードブロック内にコピペしてくください。

[miho3]

失礼いたしました。
ご指摘いただきありがとうございます。
質問にコード追加させていただきました。

Answer 3

afternoonの外側にあるDIV要素の背景色がbg-redクラス(赤色背景色っぽい名付けですよね)によって設定されているからじゃないでしょうか。
これがafternoonクラスと同じように変化しないなら幅によっては色が異なることになるので②のようになるでしょうね。
bg-redクラスのCSSが示されていないので何とも言えないですが…

Comments

[miho3]

ご回答いただきありがとうございます。
bg-redクラスのCSS画像を追加いたしました。
まだCSS初心者で大変恐縮ですが、どちらを変化させればボックス全体が緑背景になるかがわからず、
ご教示いただけますと幸いです。