CSS Media Query - width rule does not apply

Question

I'm trying to center the content of the header, if screen size decreases below 800 px.

So I defined a css media query, but it doesn't work properly. below is a fiddle with my code:

http://jsfiddle.net/QGyXe/3/

Note: I know there is a lot of code, but I'm trying to adjust the div#head_frame and its children, div#logo_container and div#main_buttons_container

What happens is, when I decrease the screen size, I see the new rules in Chrome's developer window, but the rules are overlined, I mean deactivated. I don't know why. Here is a screencap :

I tried to reproduce the error with a simple dom, but it worked :

http://jsfiddle.net/a3yKk/1/

But I'm putting it here to show what I'm trying to achieve.

Thanks for any help.

Answer 1

Your #main_buttons_container selector in your media query is less accurate than your div#main_buttons_container selector in your global CSS, so it is being overwritten. Change your CSS to:

@media screen and (max-width: 800px) {
  div#main_buttons_container {
    width: 100%;
  }
}