@媒体最小宽度未覆盖正常CSS？

我的最小宽度没有覆盖我的常规CSS？我以前从未遇到过这个问题，但我似乎无法让它正常工作。使用“！important”也没有帮助

这是我的密码-

.slant-container {
  .test-container {
    .services-content {
      -webkit-box-align: center;
      align-items: center;
      text-align: left;
      justify-content: space-around;
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;

      .left-hero {
        width: 100%;

        .hero-p {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (min-width: 841px) {
  .slant-container {
    .test-container {
      .services-content {
        .left-hero {
          width: 50%;

          .hero-p {
            padding-bottom: 3rem;
          }
        }
      }
    }
  }
}

---

您可以删除框显示，只需设置父容器的伸缩方向

。服务内容
如下：

.slant-container {
  .test-container {
    .services-content {
      align-items: center;
      text-align: left;
      justify-content: space-around;
      display: flex;
      flex-direction: column;

      .left-hero {
        width: 100%;

        .hero-p {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (min-width: 841px) {
  .slant-container {
    .test-container {
      .services-content {
        flex-direction: row;
        
        .left-hero {
          width: 50%;

          .hero-p {
            padding-bottom: 3rem;
          }
        }
      }
    }
  }
}

这实现了大致相同的效果。要使元素居中对齐，并在较小的屏幕尺寸上为
.left hero
元素实现装箱效果，可以执行以下操作：

.left-hero {
  ...
  .hero-p {
    margin: 0 auto;
    width: 90%;
  }
}

请参阅可视化-代码片段目前不支持SCS（如果我错了，请有人编辑此内容）