阻止CSS互相覆盖

Question

所以我有一个带有className items-wrap的div，我使用一些媒体查询来使我的页面响应。问题是我所放的这些风格相互重叠，最终根本不起作用。我怎样才能防止这种情况发生？那里有很多解决方案对我没有帮助。 我的班级选择器

return (
            <div className="items-wrapper">
             {display}  
            </div>
        );

SCSS：

.items-wrapper {
    padding-top: 98px;
    animation: slideUp 300ms linear;
    animation-delay: 150ms;
    @media (max-width: 991px){
        padding-top: 68px;
    }
    @media (max-width: 480px){
        padding-top: 52px;
    }
}

生成的CSS：

.items-wrapper {
  padding-top: 98px;
  animation: slideUp 300ms linear;
  animation-delay: 150ms; }
  @media (max-width: 991px) {
    .items-wrapper {
      padding-top: 68px; } }
  @media (max-width: 480px) {
    .items-wrapper {
      padding-top: 52px; } }

只有最后一个padding-top属性才能使其他属性不起作用。我怎样才能防止这种情况发生？