CSS 媒体查询相互叠加

问：

我正在尝试在较小的屏幕上使导航栏菜单按钮居中（更改边距）。尽管如此，每次我进行另一个媒体查询时，之前的媒体查询都不再起作用。 有没有人知道如何在不“破坏”之前的情况下添加媒体查询，或者有谁知道我的问题的另一个有效的解决方案？

下面是带有媒体查询的 CSS：

**/* NORMAL SMARTPHONE END */

/* NORMAL COMPUTER BEGINNING */
@media (min-width: 980px) {
    nav ul{
        float: right;
        margin-right: 20px;
    }


    nav ul li{
        display: inline-block;
        line-height: 80px;
        margin: 0 5px;
    }
}
/* NORMAL COMPUTER END */


@media only screen and (max-width: 780px){
    .checkbtn{
        margin-top: 102px;
        margin-right: 45px;
    }
}


@media only screen and (max-width: 815px) and (min-width: 781px){
    .checkbtn{
        margin-top: 92px;
    }
}


@media only screen and (max-width: 845px) and (min-width: 816px){
    .checkbtn{
        margin-top: 75px;
    }
}


@media (max-width: 900px){
    .checkbtn{
        margin-top: 45px;
    }
}

@media (max-width: 815px){
    .checkbtn{
        margin-top: 87px;
    }
}

@media (max-width: 570px){
    .checkbtn{
        margin-top: 181px;
        margin-right: 48px;
    }
    label.logo{
        margin-left: -10px;
    }
}


/* 
@media only screen and (max-width: 927px) and (min-width: 901px){
    .checkbtn{
        margin-top: 35px;
    }
}
 */**