Trouble using multiple CSS media queries

Question

My code is below. At the end of this CSS file, I've used two different media queries as break points for two different screen sizes. However, only the first is taking effect. The second has no effect at all, despite minimum and maximum screen sizes. Can someone please tell me why this might be? I honestly have no idea what further information I can give, but I'm open to any questions. Thanks in advance.

ALSO...

The nav bar container here doesn't seem to be truly fixed in mobile views. It will actually scroll down the length of the container a bit before it sticks to the top of the screen. In desktop view, this does not happen. Is there anything anyone can see here that might cause that? Thanks again.

EDIT: I've been experimenting, and it seems to have problems only at width 375. If I use @media screen and (min-width: 361px) and (max-width: 375px), it breaks at width 375. However, If I use @media screen and (min-width: 361px) and (max-width: 376px), it works at 376 just fine. I don't get it.

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.main {
    position: absolute;
    background: transparent;
    height: 100vh;
    width: 100vw;
}

.container {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 7.5vh;
    background-color: rgba(0,0,0,0.65);
    overflow: hidden;
}

.nav {
    margin-top: 3px;
}

.nav a {
    color: rgba(50, 236, 191, 1);
    text-shadow: 2px 2px rgba(183, 35, 35, 1);
    text-decoration: none;
    display: block;
}

.nav a:hover {
    color: rgb(93, 250, 90);
}

.nav li {
    list-style-type: none;
    float: left;
    margin-bottom: 6px;
}

.navLeft {
    padding-left: 20px;
}

.navRight {
    padding-right: 30px;
}

.navLeft a {
    margin-left: 30px;
}

.navRight a {
    margin-right: 30px;
}

.logo {
    position: absolute;
    width: auto;
    transition: all .5s;
}

.logoHero {
    height: 20vw;
    transform: translate(45vw, 15vw) rotate(-10deg);
    filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
}

.logoNav {
    position: fixed;
    height: 10vh;
    transform: translate(40vw, 1.5vh) rotate(-10deg);
    filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
}

/********************** RESPONSIVE BREAKPOINTS ********************************/

@media (min-width: 1px) and (max-width: 360px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

/* THIS BREAKPOINT DOES NOT WORK */

@media (min-width: 361px) and (max-width: 375px){
    .nav ul {
        display: none;
    }

    .logoHero {
        height: 30vw;
        transform: translate(10vw, 30vw) rotate(-10deg);
        filter: drop-shadow(7px 7px rgba(183, 35, 35, 1));
    }
    
    .logoNav {
        position: fixed;
        height: 8vh;
        transform: translate(5vw, 1.5vh) rotate(-10deg);
        filter: drop-shadow(3px 4px rgba(183, 35, 35, 1));
    }
}

Answer 1

The meta tag should be added in the tag in HTML document. Please check that have you added

<meta name="viewport" content="width=device-width, initial-scale=1">

The sequential order of css code also matters. Please change the sequence by following:

@media (min-width: 361px) and (max-width: 375px){
        /*Your Styles*/
    }

@media (min-width: 1px) and (max-width: 360px){
            /*Your Styles*/
    }

Alternatively... Since you are using the same styles, use a comma as a delimeter as follows.

@media (min-width: 361px) and (max-width: 375px), @media (min-width: 1px) and (max-width: 360px) {
            /*Your Styles*/
        }

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Precedence , is interpreted as the delimiter in a list of single media queries which are ORed. So each media query between the commas is first evaluated, then they are ORed together. This gives the comma / OR the lowest precedence.

not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the comma / OR.

not and only are mutually exclusive and have the same precedence. and has the highest precedence

() parentheses are only used around media features and their values, i.e. (color) or (min-width: 320px). They may NOT be used to change precedence by grouping expressions.