background-colorをめいいっぱい反映させたい。

前提・実現したいこと

いつもお世話になっております。
ただいまサツドラ（https://satudora.jp/）の模写をしており、つまづいてしまったため質問させていただきます。
CSSでバックグラウンドカラーをめいいっぱい反映させたいのですが、一部しか反映されずに途方に暮れておりました。
解決策を教えていただければ幸いです。

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

エラーメッセージ

該当のソースコード

ソースコード

    <div class="real">
      <div class="contrnt">
        <p>お得な情報</p>
      </div>
      <div class="container">
        <div class="check">
          <img  class="checked" src="img/otoku_info_shop.png" alt="">
          <p class="friyer">チラシ一覧</p>
        </div>
        <div class="Member">
          <img src="img/otoku_info_mailmaga.png" alt="">
          <p>注目の新商品やお得なセール情報、</p>
          <p>お買い物がもっと楽しくなるクーポンをお届け</p>
        </div>
        <div class="satudora">
          <img src="img/37_0.jpeg" alt="">
          <p>2019年9月9〜30日まで<br>
            サツドラマンスリー９月号！</p>
          </div>
        </div>
      </div>
    </section>

`````````ここに言
コ

.container{
display: flex;
justify-content: center;
}

.checked{
border: 1px solid #CAE5CD;
border-radius: 5px;
}

.Member{
border: 10px solid #CAE5CD;
border-radius: 5px;
}

.satudora{
border: 1px solid gray;
border-right: 15px solid #EEEEEE;
border-radius: 5px;
}

.check img{
background: #CAE5CD;
width: 200px;
padding: 50px;
}

.friyer{
border: 1px solid blue;
color: white;
background: blue;
padding: 20px;
text-align: center;
margin: 5px;
}

.Member img{
width: 200px;
padding-top: 100px;
padding-left: 80px;
}

.Member p{
text-align: center;
margin-left: 20px;
margin-right: 20px;
}

.Member{
margin-left: 5px;
margin-right: 5px;
}

.satudora{
padding-top: 20px;
padding-left: 20px;
padding-right: 10px;
}

.satudora p{
text-align: center;
margin-top: 10px;
}

.contrnt{
background: #B6FF01;
border: 1px solid #B6FF01;
width: 30%;
padding-top: 20px;
padding-bottom: 10px;
margin-bottom: 10px;

}

.contrnt p{
text-align: center;
}

.real{
border: 1px solid #EEEEEE;
width: 73%;
background: #FFF;
margin: 0 auto;
margin-top: 50px;
border-radius: 5px;
box-shadow: 10px 10px 15px -10px;
margin-bottom: 50px;
padding: 20px;
}

.Goodvalue{
background: #EEEEEE;
}

.check img:hover{
opacity: 0.7;
}

.check p:hover{
opacity: 0.7;
}

.Member img:hover{
opacity: 0.7;
}


### 試したこと![イメージ説明](aa2fec2f955caab6592872a761a95a29.png)
こちらの写真の白い部分もバックグラウンドの#EEEEEEを反映させたいです。
margin-topを使って反映されるか試した。
padding-topで反映されるか試した。

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。