Why second media query does't apply

Question

This code

@media screen and (max-device-width: 2000px)
{
    body
    {
        margin:0px;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-device-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}

gives always black background, paddings also doesn't apply so i assume second query doesn't work at all why is that?

Answer 1

This should do it:

@media screen and (max-width: 2000px)
{
    body
    {
        margin:0px;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}