Media queries not working and also overriding regular css when It shouldn't

Question

I'm having some issues implementing media queries. I just made all the media queries I need. But it seems that now when I'm testing it my normal view (desktop has also changed for some reason) and when I go to the first media queries size. I can see that some elements like #taglineand #login-form are not adopted from the media queries but from a smaller size media queries same goes for normal view. They both adopted changes from this size @media only screen and (min-height: 768px) and (min-width: 1024px) instead of the things I specified for it. I don't understand what is going wrong here

regular scss:

#login-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;


    #side {
        width: 30%;
        background-color: $plain-white;
        display: flex;
        flex-direction: column;
        padding: 20px;
        border-right: 1px solid #ECECEC;


        #side-caption {
            width: 80%;
            margin: 100px auto;

            #appoint-full-logo {
                width: 80%;
            }

            #tagline {
                margin-top: -30px;
                color: rgba(2, 159, 157, 1);
                font-weight: 500;
                font-size: 1.73em;

            }
        }
    }

    #login {
        width: 70%;
        height: 100%;
        background-color: rgba(2, 159, 157, 1);


        #login-form {
            height:80% ;
            width:80% ;
            background-color: $plain-white;
            margin: 130px auto;
            border-radius: 5px;
            display: flex;
            flex-direction: column;

            div {
                height: 20%;

                #welcome {
                    text-align: center;
                    font-weight: 550;
                    font-size: 2.5em;
                    margin-top: 50px !important;
                    color: #E8A87C;
                }

            }

            #apply-text {
                height: 15%;
                font-size: 0.9em;
                width: 70%;
                margin: auto;
                font-weight: 500;
                // text-align: center;

            }

            #apply-form-fields,
            #login-form-fields {
                height: 45%;
                display: flex;
                flex-direction: column;
                margin-left: 16%;

                :first-child {
                    margin-top: 10px;
                }

                .form-group {
                    margin: 10px 0px;
                    width: 80%;

                    label {
                        font-weight: 500;
                    }
                }
            }

            #apply-submited {
                height: 10%;
                width: 70%;
                margin: auto;

                p {
                    background-color: rgba(85, 255, 214, 0.50);
                    padding: 10px;
                    text-align: center;
                    font-weight: 600;
                    border-radius: 5px;
                    ;
                }
            }

            .button-field {
                height: 20%;


                .button {
                    cursor: pointer;
                    width: 70%;
                    height: 40%;
                    color: $white;
                    font-size: 1.1em;
                    margin: 10px auto;
                    background-color: #E8A87C;
                    border: none;
                    padding: 10px;
                    font-weight: 600;
                    border: solid 5px #E8A87C;
                    border-radius: 5px;
                    text-align: center;

                    &:hover {
                        color: #E27D60;
                    }
                }


                .change-form {
                    cursor: pointer;
                    text-align: center;

                    span {
                        font-weight: 600;

                    }

                    &:hover span {
                        color: #E8A87C;
                    }
                }

            }
        }

    }


}

Media queries located at bottom of style cheat set media queries:

@media only screen and (min-width: 1366px) and (min-height: 1024px) {

    #tagline {
        margin-top: -17px !important;
        font-size: 1.52em !important;
    }


}

@media only screen and (min-width: 1024px)and (min-height: 1366px) {
    #tagline {
        margin-top: -17px !important;
        font-size: 1.05em !important;
    }

    #appoint-full-logo {
        width: 100% !important;
    }
}

@media only screen and (min-width: 1024px)and (min-height: 768px) {
    #tagline {
        margin-top: -15px !important;
        font-size: 1.05em !important;
    }

    #appoint-full-logo {
        width: 100% !important;
    }

    #login-form {
        width: 60% !important;
        height: 80% !important;
        margin-top: 110px !important;

    }

    #welcome {
        font-size: 2em !important;

    }
}

@media only screen and (min-width: 768px)and (min-height:1024px) {
    #tagline {
        margin-top: -10px !important;
        font-size: 0.76em !important;
    }

    #appoint-full-logo {
        width: 105% !important;
    }

    #login-form {
        width: 80% !important;
        height: 60% !important;
        margin-top: 110px !important;

    }

    #welcome {
        font-size: 1.9em !important;

    }
}

Answer 1

1.

@media only screen and (min-height: 768px) and (min-width: 1024px) --- perhaps your window/browser height is Below 768px

2.

The ! IMPORTANT -flag often causes problems in code

3.

Your code in media-queries.scss should be nested in the same way regular.scss is nested too