CSS Media Queries - Not Working at Correct Width

Question

I've set up a test with media queries to work like so:

@media only screen and (min-width: 650px) and (max-width: 700px) {
    #global-wrapper-cp-fefc4ea514a255df2244eaccdabbb262 * {
        background: red !important;
    }
}

However, the CSS is effective from 666px to 716px:

My browser is at 100% zoom, so it cannot be this. I am using Chrome extension "Browser Width".

I'm hoping this is something simple that will leave me red faced. Can anybody offer any advice? Thank you.

Answer 1

You have to test it inside responsive view section, currently it's showing 17px scroll-bar. After excluding this width, your media query will work.