media query with larger size has more specifity than the media query with smaller size

Question

I have two media queries:

 `@media (max-width: 815px){
       .page .item {
          margin-right: 5px;
          }
       }`


 `@media (max-width: 655px){
       .page .item {
        margin: 0 auto;
        }
      }`

Though the media query (max-width: 655px) is declared later the margin-right is still 5px.

In chrome devtools I found out that margin: 0 auto doesn't work due to media query(max-width: 815px) impact. I tried to set margin-right to unset in @media (max-width: 655px) but it still doesn't seem to work. Why the media query(max-width: 815px) rewrites the latter one even though it was declared in the beginning?