I have 2 media query sizes -
only screen and (min-width: 980px)and (max-width: 1499px)";
only screen and (min-width: 768px)and (max-width: 979px)";
window.innerWidth is the width of the viewport, which includes vertical scrollbars.
My guess is the media queries are triggering based on the width of the viewport minus the scrollbar, which would account for the 18px discrepancy. This explains it better than I can: