媒体查询宽度：100％导致溢出

Question

我正在设计我的第一个响应式网站。直到现在，当我将容器div设置为100％时，情况一直很好。我们的想法是将容器div设为100％，最大宽度为768px。如果浏览器窗口小于768px，则容器显示占用100％的屏幕大小而不会溢出。

看起来设置.container {width：100％}使得容器固定为678px，即使屏幕尺寸较小，也会导致溢出。

有人可以帮忙吗？

示例：

/* --- Main style - not media --- */

html, body {
width: 100%;
    height: 100%;
}
.main {
position: relative;
width: 100%;
height: 100%;
min-width: 829px;
}
.all-wrapper {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
position: relative;
}
.container {
position: absolute;
top: 6.0em;
width: 70%;
left: 0;
max-width: 1140px;
min-width: 500px;
margin-bottom: 0;
}
.content-box {
position: relative;
width: 80%;
margin: 2.0em auto 3.0em;
padding: 1.0em;
}


/* -------Media -----------*/

    @media screen and (max-width: 767px) {

.main {
    max-width: 100%
    min-width: 0;
}
.container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
}
.content-box {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 4.0em;
}
}

    /*-- html ----*/
<div class= "main">
    <div class="container">
    <div class="content-box">
        <p>stuff</p>                
    </div>
</div>
</div>