Media Query not applying

Media Query not applying

This is my current main CSS
.right {
padding: 0 0 0 270px;
border-right: 10px solid #C9CACE;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 248px;
background: url('../img/bg.gif') repeat;
}
This is my media query
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.right {
padding: 0 0 0 270px;
border-right: 10px solid #C9CACE;
display: table-cell;
}
.left {
display: table-cell;
width: 248px;
background: url('../img/bg.gif') repeat;
}
}
It seems my media query still applies the position, top, left and height
in my media query, how do I fix this?