所有媒体查询都在工作，只有一个

Question

我检查了有关媒体查询的所有其他问题，但它们似乎不是同一个问题（或）可能是因为我是新手。

无论如何，我有4个媒体查询。在大多数情况下，随着桌面窗口变小（直到你进入移动设备），它们只会缩小边距。 Flex盒完成剩下的工作。

缩小窗口时。媒体查询在第3次，第2次和第4次查询中跳过了第3次，第2次和第4次查询。任何人都可以看到CSS的问题？破碎的一个： - ＆gt;

@media screen and (max-width: 1289px) and (min-width: 401) {

    @media screen and (min-width: 1950px) {

       .header {
            margin-left: 20em;
            margin-right: 20em;
        }

        .container {
            margin-left: 20em;
            margin-right: 20em;
        }

        .footer {
            margin-left: 20em;
            margin-right: 20em;
        }
    }

    @media screen and (max-width: 1949px) and (min-width: 1290px) {

       .header {
            margin-left: 5em;
            margin-right: 5em;
        }

        .container {
            margin-left: 5em;
            margin-right: 5em;
        }

        .footer {
            margin-left: 5em;
            margin-right: 5em;
        }
        .item{background-color: blue;}
    }

    @media screen and (max-width: 1289px) and (min-width: 401) {

       .header {
            margin-left: 0em;
            margin-right: 0em;
        }

        .container {
            margin-left: 0em;
            margin-right: 0em;
        }

        .item {
            width: 100%;
            background-color: red;
        }

        .footer {
            margin-left: 0em;
            margin-right: 0em;
        }
    }
    @media screen and (max-width: 400px) { 

          #body {
            font-size: 3.0em;
        }

        .header {
            margin-right: 0em;
            margin-left: 0em;
        }

        .container {
           margin-right: 0em;
           margin-left: 0em;
        }
          .item {
            width: 100%;
        }
        .footer {
           margin-right: 0em;
           margin-left: 0em;
           font-size: .3em;
        }

        .tab {
            height: 10vh;  
        }

        .option {
            width: 125px;
            height: 125px;
        }
         .specifications-table {
            margin-top: 0em;
        }

        .table-header{
            font-size: 1.5em;
        }

        .spec-label {
            font-size: 1em;
        }

        .spec-option {
            font-size: 1em;
            font-style: italic;
        }

        .disclosure{
            max-width: 100%;
            font-size: .35em;
        }
    }