为什么加上max-width:768px不管用呢？

我在样式表里面写的这句话 加上这句话后当屏幕小于768时 那个div1的宽度百分比为什么还是50%?我哪里写的不对了？

<style type="text/css">
   @media (max-width:768px){
     #div1{width: 100%;}
   }
   </style>

<div id="div1" class="container" style="background-image: url(bg2.jpg);margin-top: 100px;width: 50%">
</div>

---

优先级问题

优先级顺序

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）

• 元素(类型)选择器

• 类选择器

• 属性选择器

• 伪类

• ID 选择器

• 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

---

div的style问题，优先级