移动端浏览pc站，一个元素撑开页面

pc站没有写viewport

结构如上，header,section宽度设置为100%，header>article宽度为具体像素。
当用移动端浏览页面时，会出现横向滚动条，header,section为屏幕宽度，而article会超出屏幕宽度，

请问如何才能正常显示，如下图

---

    *{
        margin: 0;
        padding: 0;
    }
    header,section{
        width:100%;
        height: 300px;
        background: #09c;
        /*有下拉菜单，不能overflow:hidden*/
        /*overflow: hidden;*/
        /*不能overflow-x:hidden,会出现竖向滚动条*/
        /*overflow-x:hidden;*/
    }
    article{
        width:1200px;
        height:60px;
        background: #58a;
        margin:0 auto;
    }

<header>
    <article></article>
</header>
<section></section>

jsbin效果如下图，手机浏览器类似，article为固定宽度，页面所有主体内容，都放在这个固定宽度内

---

article放在header里面不符合语义化吧
如何要适配还是有个办法，为article加上max-width:100%

article{
        width:1200px;
        max-width:100%;
        height:60px;
        background: #58a;
        margin:0 auto;
    }

---

附上地址，谢谢否则帮不了

---

所以PC和手机要写适配，肯定不会一行代码全解决。尤其是两种设备下样式不一样的情况。

---

是不想让 article 溢出 header？

header {
  overflow: hidden;
}