A more reliable way to set up media queries?

I am coding a website Mobile First style and have set up some media queries so when the window is wider the navigation changes. I have made a jsfiddle showing my code. For some reason on the jsfiddle when i resize the width of the result section the navigation changes in a different way than when I view it in google chrome. I am looking for a more reliable way to code my media queries so that i don't have any stacking navigation link problems but at the same time make the navigation adjust well when the window is resized. Also for some reason when viewing on Google Chrome (the only browser i've tested it on) when I expand the window it adjusts perfectly but when I contract the window it has link stacking problems and my logo gets stretched width-wise. JSFIDDLE: http://jsfiddle.net/Justinms1000/7k5Hu/