Media queries, inline blocks and text-align justify

Question

I got a problem with aligning elements using inline blocks It's all normal when i just using technique with "text-align: justify"

but when i put all in media query then nothing happens

(elements not aligning width text-align: justify)

here is the fiddle how it shoud be

ul {
    text-align: justify;
    width: 100%;
}

ul:after {
    content: " ";
    display: inline-block;
    width: 100%;
    background: #000;
    height: 10px
}

ul > li {
    display: inline-block
}

http://jsfiddle.net/2t6vm/

and there is example width my problem (try to resize result frame)

@media only screen and(max-width: 479px) {
     same css
 }

http://jsfiddle.net/FYLQq/

Answer 1

Check its working in Media queries.

Updated Fiddle

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

    ul {
        text-align: justify;
        border:solid 1px white;
        width: 100%;
    }

    ul:after {
        content: " ";
        display: inline-block;
        width: 100%;
        background: #000;
        height: 10px
    }

    ul > li {
        display: inline-block
    }

}