error using @media

The page is this:

link

css is this:

    ...
media screen and (min-width: 0px) and (max-width:480px)  {

.sessoes {  
    width:100%;
}

.menu {
    background:none;
}

  .menus {
      width:100%;
  }

  .menusItens {
      display:inline;
   }

   ul.listaTopo {
      display:block;
   }

   ul li.listaLi {
      clear:both;
      display:inline-block;
   }

   ul li.listaLi a{
      display:inline-block;
   }

    .final, .base {
        width:100%;
        font-size:10px;
    }

.final {
    height:80px;
}

    .baseEsquerda, .baseDireita {
        width:45%;
    }

    .finalEsquerda, .finalDireita {
        width:95%;
    }

}

@media screen and (min-width: 0px) and (max-width:320px)  {  

  .formLogin {
     width: 300px;
  }

}
@media screen and (min-width: 321px) and (max-width:480px)  {

  .formLogin {
     width: 430px;
  }

}

Only the @media is in% with 320px.

That is, if I put everything inside the block

media screen and (min-width: 0px) and (max-width:320px)  {
}

There are a lot of things that are good for both% and% resolution, such as:

.sessoes {  
    width:100%;
}

But if I do

@media screen and (min-width: 0px) and (max-width:480px)  {

.sessoes {  
    width:100%;
}
...
}

@media screen and (min-width: 0px) and (max-width:320px)  {  
  .formLogin {
     width: 300px;
  }
 ... 
}

@media screen and (min-width: 321px) and (max-width:480px)  {
  .formLogin {
     width: 430px;
  }
 ... 
}

So at any resolution (including that of 320px that was working) it behaves as if it is not within a 480px block at any resolution.

Where am I going wrong?

I noticed that the error only happens from the header down.