I dont know why but i cant use multiple @media screens

Question

I am trying to make my site responsive and i though my problem was that the media screen doesnt save but i found out. That for some reason i cant use more than one media screens. I have posted a similer issue before but now i know what the problem is, but i dont know the solution. previous post : Why doesn't my @media screen save

CSS

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

    header img{
margin-left: auto;
margin-right: auto;
display: block;
}

footer img{
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
left: 40%;
right: 40%;
}
.logo img{
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 2%;
left: 38%;
right: 40%;
}
.home img{
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
left: 35%;
right: 40%;
width: 120px;
}


.socialmedia-twitter img {
position:fixed;
margin-left: auto;
margin-right: auto;
display: blocks;
bottom: 5%;
left: 5%;
right: 95%;
}

.socialmedia-facebook img {
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
right: 13%;
left: 87%;
}



}


@media screen and (max-width: 640px) {

header img{
margin-left: auto;
margin-right: auto;
display: block;
}

footer img{
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
left: 40%;
right: 40%;
}
.logo img{
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 2%;
left: 40%;
right: 40%;
}
.home img{
    position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
left: 40%;
right: 40%;
width: 120px;
}


.socialmedia-twitter img {
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
right: 50%;

}

.socialmedia-facebook img {
position:fixed;
margin-left: auto;
margin-right: auto;
display: block;
bottom: 5%;
right: 20%;
left: 50%;
}
}

Answer 1

When the screen width is 480 pixels or less, both rulesets apply. The rules in the max-width 640px ruleset effectively override everything in the 480px ruleset.

You'll have to specify that the 640px ruleset only applies between 480px and 640px width.

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