Responsive Bilder nicht arbeite beim header Tag

[liebewinter]

aber das ich schon gemacht.. , ich habe auf meine tablet.css,

@media only screen and (min-width: 320px) 
               and (max-width: 568px) 
               and (orientation :  portrait) {
body {

      display: grid;
      background-color: #eaf6e5;
      grid-template-columns: 11% 80%  9%;
      grid-row-gap: 3px;
      font-size: 1.0833em;
      margin: 1px;
      grid-template-areas:
       "header  header header"
       "nav     nav   nav"
       "main main  main"
       "footer  footer footer";
}
body > header {

background-image: url("Bilder/night_hoppe.JPG");
background-repeat: no-repeat; 
position: relative;

margin-bottom: 1px; 
position: relative;


border-left: 1px;

}

nav {background-color: #d2f5c4; display: flex; }
nav ul {list-style-type: none;  flex: 1 0 auto; padding: 0px 0px 0px 9px;}
nav li { display: inline-block;}
nav ul:nth-of-type(2) { text-align: left; padding: 0px 30px 0px 25px;  }
#navs {
 padding: 1px 0px 1px;  /* Großer Nav , nur Obern und Unten   */
}

.dropdown-content a {
   padding: 10px 4px;

}
nav a {
  color: black;
  text-decoration: none;
  display: inline-block;
  padding: 0px 1px 0px 1px;
  font-size: 8px;
  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
} 
body > main {
    height: 180vh;  
}

#name {font-size: 0.55em;}
#email {font-size: 0.55em;}
#text {font-size: 0.3em;}

   /* HOVER  */

.dropdown:hover .dropdown-content {


  top: 18px; 
}

.link_change ul {
    margin-left: 40px;
}    


#img1 {float: left; margin: 1px; }
#copry a {text-decoration: none; margin-bottom: 1px;}
#copry p {font-size: 6px; margin-bottom: 0px; }


}

auch wenn meine Media Query habe jetzt px (ich habe so geschrieben um zu sehen ob das probleme mit em war..ich habe gesehen das sie spiele keine rolle auf meine Probleme...) , Später will em gebe...