即使所有元素都有宽度：100％，水平滚动？

Question

我在这里上传了网站：

http://staging.18d959a75b.applications.strobeapp.com/?q=b&place=9&dish=7745

1. 将浏览器缩小480px或更低。
2. 进行任何搜索（您可以写'b'）。
3. 点击一个项目的标题。

您会发现可以向右滚动。我不明白为什么因为所有元素都有宽度：100％。

CSS：

#overlay {
     background: #222 !important;
     display: none;
     opacity: 0.8;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     float:left;
     margin-bottom:-120px;
     z-index: 10000;
}

div#dish-popup-container {
    div#dish-popup {
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;

        div.dish {
            padding: 10px 10px 5px;
            width: 100%;

            div.header {
                span.top-dish-name {
                    display: none;
                    font-size: 14px;
                    font-family: Bitstream Charter, Georgia, Times Romans, serif;
                    margin: 5px 5px 0 0;
                }
                span.place-name {
                    font-size: 16px;
                    font-family: Bitstream Charter, Georgia, Times Romans, serif;
                    margin: 6px 5px 0 0;
                }
                span.top-dish-price {
                    display: none;
                    font-size: 12px;
                    font-family: Bitstream Charter, Georgia, Times Romans, serif;
                    margin: 6px 0 0;
                }
            }
        }

        div.map {
            height: 160px;
            width: 100%;
        }

        div.menu {
            width: 100%;
            height: auto;
        }

        div.menu ol {
            height: auto;
        }
    }

    #footer {
        position: relative;
        #counts {
            display: none;
        }
    }
}

我能造成什么？

Answer 1

您已将width: 100%和左右padding应用于同一元素。这会导致元素溢出填充量。这就是造成横向滚动的原因。

删除填充，或设置width: auto而不是width: 100%;。