Why doesn't my @media screen save

Question

I have been stuck with this problem or the past hour and its really annoying me. I am making my website responsive to different screen sizes every time I write the code for it, I test it and it works. Then if I close the browser and reopen or reopen the code editor (brackets) the page loads like nothing happened. So I have re write everything again. This problem keeps recurring and I don't know why it wont just save. I can place my code since its over 2000 lines and I have just moved on to the responsive side of the site.

but I have applied this to every html file.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and I have used this as my starting statement for the @media in the css

@media screen and (max-width:)

CSS

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%;
    left: 20%;
    right: 40%;
}

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

@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

There are lots of reasons why this could have happen, but i think it is the obvious one. if you reach a sertan width @media screen and (max-width: 640px) this css wil be enabled, in order to work his way back you need to define the width your working in. While working on the design, it is also recommended to turn of any cache methods.

So for this to work proberly you will prob need three @media screen properties.

Examples