Horizontal scrolling even if all the elements have width: 100%?

Here I uploaded the site:

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

1. Shrink your browser 480px or less.
2. Make any search (you can write 'b').
3. Click one item's title.

You will realize that you can scroll to the right. I don't understand why because all the elements have width: 100%.

CSS:

#overlay {
     background: #222 !important;
     display: none;
     opacity: 0.8;
     position: absolute;
  开发者_JAVA百科   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;
        }
    }
}

What could me causing this?

---

You have width: 100% and left and right padding being applied to the same element. This causes the element to overflow by the amount of the padding. That's what is causing the horizontal scroll.

Remove the padding, or set the width: auto instead of width: 100%;.