媒体查询不适用于450px的屏幕尺寸

Question

https://jsfiddle.net/t1etnj5w/1/

我想让上面的演示完全响应文本应该在中心。但是当我试图在@media屏幕（最大宽度：450px）中添加padding-left：10％时，它无效。     它已经工作在600px以上的屏幕上。     请参阅上面的演示。

[1]: https://jsfiddle.net/t1etnj5w/1/

Answer 1

因为标题位置：aboslute和minus margin css，它没有正确显示。

 header {
position: absolute;
top: 60%;
left: 22%;
z-index: 999;
color: #fff;
/*background: rgba(0,0,0,0.5);*/
padding: 60px;
 margin: -200px 0 0 -200px
}