Media Query Not Firing
<p><strong>The Goal</strong></p>

<p>The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example</p>

<pre><code>Screen Size   Boxes   Percent Width
1250px          3           33.3
750px           2           50
500px           1           100
</code></pre>

<p><strong>Current Progress</strong> </p>

<p>I have created the grid system and the media queries</p>

<pre><code>/* Max Width 1250px */
@media screen and (max-width: 1250px) {
    .boxes {
        width: 33.3%;
    }
}

/* Max Width 750px */
@media screen and (max-width: 750px) { 
    .boxes {
        width: 50%;
    }
}

/* Max Width 500px */
@media screen and (max-width: 500px) { 
    .boxes {
        width: 100%;
    }
}
</code></pre>

<p><strong>The Problem</strong></p>

<p>I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?</p>

<p><strong>JSFiddle -</strong> <a href="https://jsfiddle.net/6k2Lkm2f/1/" rel="nofollow">https://jsfiddle.net/6k2Lkm2f/1/</a></p>