The 320px media query is not working.
The 360px media query is not working.
But the other media queries are working.
Any suggestions on how to resolve this?

    body 
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;


.topnav 
    background-color: #333;
    width: 100%;
    position: fixed;
    top: 0px;
    margin-left: -9px;


.topnav a:hover 
    background-color: darkgreen;
    color: white;
    text-decoration: underline;


nav 
    margin: 33px;
    margin-top: 32px;


img#logo 
    width: 101px;
    float: left;
    margin-top: -15px;
    margin-left: -20px;


a.active 
    background-color: #04aa6d;
    color: white;
    text-decoration: none;


nav a 
    color: #f2f2f2;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 17px;


a.icon 
    display: none;


#right 
    float: right;
    margin-top: -16px;


.pastor 
    width: 1000px;
    margin-left: 275px;
    margin-top: -231px;


hr 
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;  


ul 
    list-style-type: none;


#li 
    float: right;
    margin-top: -49px;
    margin-right: 15px;


li#li 
    padding: 10px 20px;


li#li a 
    color: whitesmoke;
    background-color: #04AA6D;


li#li a:hover 
    color: black;


#figure 
    display: flex;
    justify-content: center;


figure figcaption 
    text-align: center;


#events 
    background-color: #0193de;
    text-align: center;


.figure 
    text-align: center;
    display: inline-block;
    margin-left: auto;
    width: 350px;
    height: 424px;


.figure img 
    width: 350px;
    height: 424px;


figure figcaption 
    color: white;


#footer 
    background-color: #333;
    text-align: center;
    color: white;


#footer a
    color: green;


#footer a:link 
    color: white;


#footer a:visited 
    color:  white;


#footer a:hover 
    background-color: darkgreen;
    text-decoration: underline;


#marg 
    margin-top: 25px;
    display: block;


/*This is the gallery section*/

#figs.figures 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


.figures figcaption 
    color: black;


#pictures 
    background-color: #12954b;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


.pictures img 
    height: 700px;
    width: 437px;


#pictures figcaption 
    color: white;


/*This is the donate section*/

   .dropbtn 
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;


.dropdown 
  position: relative;
  display: inline-block;
  width: 100%;


.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%;


.dropdown-content a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;


.dropdown-content a:hover background-color: #ddd;

.dropdown:hover .dropdown-content display: block;

.dropdown:hover .dropbtn background-color: #3e8e41;

abbr 
    text-decoration: underline;


/*This is the contact section*/
.margin 
    margin-top: 100px;
    text-align: center;


.margin2 
    text-align: center;


input:focus 
        border: 3px solid #0193de;
    
    input 
        width: 51%;
        padding: 12px 20px;
        margin: 8px 1px;
        box-sizing: border-box;
        border-right-color: #0193de;
    
   textarea 
        width: 51%;
        height: 100px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        resize: none;
        border-right-color: #0193de;
    

.submit 
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    
    .reset 
      background-color: red;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    

@media screen and (min-width: 320px) 
body 
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;

.topnav 
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    top: 0px;
    margin-left: -9px;

.topnav a
    float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

.topnav a:hover 
    background-color: #04AA6D;
    color: black;
    text-decoration: underline;

.topnav a.active 
    background-color: darkgreen;
    color: white;


.topnav a:visited 
    color: dodgerblue;


.topnav .icon 
    display: none;

img#logo 
    width: 70px;


nav 
        margin: 12px;
    margin-top: 0px;


#right 
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-right: 79px;


#p 
    display: inline-block;


.pastor 
    width: 300px;
    margin-top: -26px;
    margin-left: 23px;


hr 
    width: 100%;
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;


ul 
    list-style-type: none;


ul li 
    display: inline-block;


#il 
    margin-left: -34px;
    margin-top: -2px;


#li 
    float: right;
    margin-top: 20px;
    margin-right: 2px;


#li a 
    text-align: center;
    color: whitesmoke;
    background-color: #04AA6D;


li#li 
    padding: 0px;


#figure 
    display: flex;
    flex-direction: column;


.iframe 
    margin-left: 0px;
    width: 250px;


#figure figcaption 
    color: black;


figcaption 
    text-align: center;


#events 
    background-color: #0092dc;
    text-align: center;


.figure 
    margin-left: 25px;
    width: 250px;


.figure img 
    width: 350px;
    margin-left: 0px;


.figure figcaption 
    color: white;
    text-align: center;


#footer 
    background-color: #333;
    text-align: center;
    color: white;


#marg 
    display: block;
    margin: 20px 0px;


#downnavbar a:link 
    color: white;


#downnavbar a:visited 
    color: dodgerblue;


#downnavbar a:hover 
    text-decoration: underline;


#downnavbar a 
    text-decoration: none;


#downnavbar a.active 
    background-color: transparent;


#downnavbar a:hover 
    background-color: transparent;


#marg .fa-brands
    color: #269f5b;


#footer address a 
    color: green;


address 
    margin-top: 10px;


@media screen and (min-width: 320px) 
    .topnav a:not(:first-child) 
        display: none;
    
    .topnav a.icon 
        float: right;
        display: block;
    


@media screen and (min-width: 320px) 
    .topnav.responsive 
        position: fixed;
        width: 361px;
    
    .topnav.responsive .icon 
        position: absolute;
        right: 0;
        top: 0;
    
    .topnav.responsive a
        float: none;
        display: block;
        margin-top: 21px;
    


@media screen and (max-width: 360px)
@media screen and (max-width: 412px)
@media screen and (min-width: 414px)
@media screen and (min-width: 428px)
@media screen and (min-width: 768px)
@media screen and (min-width: 800px)
@media screen and (min-width: 820px)
@media screen and (min-width: 834px)
@media screen and (min-width: 884px)

The 320px media query is not working. The 360px media query is not working. But the other media queries are working. Any suggestions on how to resolve this?

Awesome is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.