How to stop CSS media query from overriding 'main' CSS and other media queries
Say you have your "main" CSS, then below it you have 3 media queries for different screen widths. For example:

    @media (max-width: 1024px){
       ...
    }
    
    @media (max-width: 768px){
       ...
    }
    
    @media (max-width: 480px){
       ...
    }


Now, I notice the middle query's styles being applied even when my browser is at full screen. On chrome inspect element, it shows:

  

>       /server/website/#
>         media="all" 
>     (CSS for middle query above)

The styles being applied includes it's width, which is declared in every query differently, at a percentage value. At full screen, my main CSS should be applied, being that it's over 1024px width.

Is this happening because I only have max-width as the condition? What other factors might cause this to happen?
How to stop CSS media query from overriding 'main' CSS and other media queries
===

Say you have your "main" CSS, then below it you have 3 media queries for different screen widths. For example:

    @media (max-width: 1024px){
       ...
    }
    
    @media (max-width: 768px){
       ...
    }
    
    @media (max-width: 480px){
       ...
    }


Now, I notice the middle query's styles being applied even when my browser is at full screen. On chrome inspect element, it shows:

  

>       /server/website/#
>         media="all" 
>     (CSS for middle query above)

The styles being applied includes it's width, which is declared in every query differently, at a percentage value. At full screen, my main CSS should be applied, being that it's over 1024px width.

Is this happening because I only have max-width as the condition? What other factors might cause this to happen?