title: @media screen and background-color problem. Supposed background-color is not being displayed
body: <p>I tried everything in the stack overflow.
  I use microsoft edge and I updated it.
  I tried adding <code>!important</code>
  I tried putting @media{} after all the background-color declarations.</p>
  <p>But the supposed background color is not being displayed after I resize and make the screen smaller or the make the browser window smaller!</p>
  <p>It should display tomato color when resized, but instead it displays white background-color.</p>
  <pre><code>#hakkimda {
              padding-top: 30px;
              /*clear: both; float left ve 
      float right varsa buna etkiyen 
      onları iptal etmek için*/
              height: 330px;
              background-color: tomato;
              color: black;
          }
  @media screen and (max-width:992px) and (min-width: 0px){
              .medyalarim1 {
                  width: 100%;
              }
  
              #hakkimda img{
                  margin-top:30px;
              }
              #hakkimda{
                  background-color: tomato !important;
              }
          }
  </code></pre>
  <pre><code>&lt;div id=&quot;hakkimda&quot;&gt;
          &lt;img src=&quot;../../eyeTers.jpg&quot; alt=&quot;&quot;&gt;
          &lt;p&gt;Coherent Games
              Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Here is the larger part of the code:</p>
  <pre><code>#hakkimda {
              padding-top: 30px;
              /*clear: both; float left ve 
      float right varsa buna etkiyen 
      onları iptal etmek için*/
              height: 330px;
              background-color: tomato;
              color: black;
          }
  
          #hakkimda img {
              border: 5px dashed grey;
          }
  
          #hakkimda p {
              white-space: pre-line;
              text-transform: capitalize;
          }
  
          /* #hakkimda p span{
      font-size: larger;
      font-weight: bold;
  } */
          #hakkimda p::first-line {
              font-weight: bold;
              text-decoration: underline;
              font-size: 30px;
              letter-spacing: 3px;
          }
          @media screen and (max-width:992px) and (min-width: 0px){
              .medyalarim1 {
                  width: 100%;
              }
              
              #hakkimda img{
                  margin-top:30px;
              }
              #hakkimda{
                  background-color: tomato !important;
              }
          }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;coherentgames&quot;&gt;
          &lt;span class=&quot;coherentgamesyazi&quot;&gt;
              Coherent Games Korku Oyunları Tasarlar
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;medyalarim&quot;&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu apartman dairesinde geçer.
              &lt;p&gt;Kapalı ortamda en iyi korku oyunu&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu ötanazi'dir.
              &lt;p&gt;Kasaba ortamında geçen oyundur.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu antolojik korkudur.
              &lt;p&gt;Hikayeler her türlü ortamda geçmektedir.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;hakkimda&quot;&gt;
          &lt;img src=&quot;../../eyeTers.jpg&quot; alt=&quot;&quot;&gt;
          &lt;p&gt;Coherent Games
              Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Where is the problem?</p>
  <p>as @A Haworth requested here s the complete code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          body {
              font-family: 'Courier New', Courier, monospace;
          }
  
          div {
              width: 100%;
              height: 300px;
              text-align: center;
              color: orangered;
  
          }
  
          #coherentgames {
              /*bu 3 yazı tipi benzer yazı tipleri 3. tip tüm ,
          browserlarda var ilki yoksa diğeri o yoksa en sondaki kullanılır*/
              background: url(../../COHERENTGAMESLOGO.png);
              background-size: 100% 300px;
          }
  
          .coherentgamesyazi {
              font-size: 20px;
              text-shadow: 0px 0px 1px white;
              background-color: lightgreen;
          }
  
          .medyalarim {
              /*En yukarda aynı seviyedeki tüm div'lerin 
      width değeri 100% verilmiş zaten*/
              /*medyalarim div'inin içersindeki elemanları 
      float left yap yani sola yasla*/
              /*float:left;*/
              /*içersindeki tüm yazılarım fontunu kalınlaştırır*/
              font-weight: bold;
          }
  
          .medyalarim1 {
              padding-top: 10px;
              width: 33.33%;
              height: 300px;
              /*bu div'e float left dememize rağmen div içersindeki yazılar 
      float left yapmıyor sola yaslanmıyor merkezde duruyor*/
              float: left;
          }
  
          .medyalarim1 {
              padding-top: 10px;
              width: 33.33%;
              height: 300px;
              float: left;
          }
  
          .medyalarim1 {
              padding-top: 10px;
              width: 33.33%;
              height: 300px;
              float: left;
          }
  
          .medyalarim1:nth-child(1) {
              /*medyalarım class'ının 1. child'ı anlamına gelir*/
              background: url(&quot;../../fetuspt.jpg&quot;) no-repeat;
              background-image: 100% 100%;
              background-size: cover;
          }
  
          .medyalarim1:nth-child(1) p {
              color: turquoise;
          }
  
          .medyalarim1:nth-child(2) {
              /*medyalarım class'ının 1. child'ı anlamına gelir*/
              background: url(&quot;../../mary.jpg&quot;) no-repeat;
              background-image: 100% 100%;
              background-size: cover;
          }
  
          .medyalarim1:nth-child(2) p {
              color: green;
          }
  
          .medyalarim1:nth-child(3) {
              /*medyalarım class'ının 1. child'ı anlamına gelir*/
              background: url(&quot;../../sounthbound.jpg&quot;) no-repeat;
              background-image: 100% 100%;
              background-size: cover;
          }
  
          .medyalarim1:nth-child(3) p {
              color: purple;
          }
  
          #hakkimda {
              padding-top: 30px;
              /*clear: both; float left ve 
      float right varsa buna etkiyen 
      onları iptal etmek için*/
              height: 330px;
              background-color: red;
              color: black;
          }
  
          #hakkimda img {
              border: 5px dashed grey;
          }
  
          #hakkimda p {
              white-space: pre-line;
              text-transform: capitalize;
          }
  
          /* #hakkimda p span{
      font-size: larger;
      font-weight: bold;
  } */
          #hakkimda p::first-line {
              font-weight: bold;
              text-decoration: underline;
              font-size: 30px;
              letter-spacing: 3px;
          }
          @media screen and (max-width:992px) and (min-width: 0px){
              .medyalarim1 {
                  width: 100%;
              }
              
              #hakkimda img{
                  margin-top:30px;
              }
              #hakkimda{
                  background-color: tomato !important;
              }
          }
          
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;coherentgames&quot;&gt;
          &lt;span class=&quot;coherentgamesyazi&quot;&gt;
              Coherent Games Korku Oyunları Tasarlar
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;medyalarim&quot;&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu apartman dairesinde geçer.
              &lt;p&gt;Kapalı ortamda en iyi korku oyunu&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu ötanazi'dir.
              &lt;p&gt;Kasaba ortamında geçen oyundur.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;medyalarim1&quot;&gt;Konusu antolojik korkudur.
              &lt;p&gt;Hikayeler her türlü ortamda geçmektedir.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;hakkimda&quot;&gt;
          &lt;img src=&quot;../../eyeTers.jpg&quot; alt=&quot;&quot;&gt;
          &lt;p&gt;Coherent Games
              Böbreküstü bezlerinizi patlatır. Size adrenalin kusturur.
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Screenshots:
  <a href="https://i.stack.imgur.com/smBHC.jpg" rel="nofollow noreferrer">enter image description here</a>
  <a href="https://i.stack.imgur.com/JUU7h.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  <p>I tried the same code for firefox browser too but it did not work there either, here is the screenshot: <a href="https://i.stack.imgur.com/GXnFk.png" rel="nofollow noreferrer">enter image description here</a></p>