我的scss中有三个媒体查询，但只有第一个被执行：（它们在scss页面的底部）。我试过颠倒顺序，但我没有得到样式，甚至在我的检查员。现在我得到了他们，但他们没有应用（看看下面的截图）。

@media only screen and (max-width: 700px) {
  .profile-banner {
    transform: translateY(0rem) !important;
    .img-div {
      margin-right: 1rem !important;
    }
    .profile-info {
      padding-top: 3rem;
      p {
        font-size: 12px !important;
      }
      h1 {
        font-size: 2.5rem !important;
      }
    }
  }
}
@media only screen and (max-width: 550px) {
  .profile-info {
    padding-top: 2rem;
  }
}

@media only screen and (max-width: 450px) {
  .profile-info {
    padding-top: 1rem;
  }
}

谢谢！