Media query at max-width not activating CSS styles

This is a general rundown of the problem I'm dealing with. I have my main CSS stylesheet and two others that have media queries.

<link rel="stylesheet" href="Styles/mainStyles.css"> <link rel="stylesheet" href="Styles/smStyles.css" media="only screen and (min-width: 768px) and (max-width: 991px)"> <link rel="stylesheet" href="Styles/mdStyles.css" media="only screen and (min-width: 992px) and (max-width: 1269px)">

When the browser is at a width of 990px the smStyles stylesheet is being called. At 992px the mdStyles takes over.

But if the width is at 991px, the smStyles is no longer in effect and my webpage reverts to the mainStyles sheet (making the entire page look like a mess).

I've been going at this for hours and I can't figure out why it is happening. Please let me know if there is something I am missing here. I'm viewing the widths using the Chrome inspector.

(Also, yes, I do have <meta name="viewport" content="width=device-width, initial-scale=1">)