ширина div на 80%, переполнение родительского div на маленьких экранах

Question

Я только начинаю с html/css/javascript. Я пытаюсь сделать пузырь цитаты, который составляет 80% от ширины его родительского контейнера. Вы можете увидеть его здесь: http://seiu775bg.bitballoon.com/sample.

Он отлично выглядит на экране ноутбука, но когда я делаю экран более узким, он не остается на 80% ширины.

Вот код для речи пузырь:

p.speech { 
    position: relative; 
    width: 80%; 
    height: auto; 
    text-align: left; 
    font-style:italic; 
    line-height: auto; 
    padding: 10px 20px; 
    background-color: #fff; 
    border: 8px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    display:block; 
    margin: 8px 8px 35px 8px; 
} 

Что мне не хватает? Заранее спасибо!

Answer 1

Позволяет проверить родителя, посмотрите на родителей «ширина»

#container { 
    /* border: 1px solid black; */ 
    width: 500px; <--- change it. 
} 

@media screen and (max-width: 500px) 
#container { 
    width: auto; <--- see? 
} 

Я вижу только «Макс-ширина: 500px», как правило, когда мы делаем он реагирует, мы используем еще несколько медиа-запросов.

внесите изменения там, также попробуйте добавить больше разрешений на ваш css.

Answer 2

Я видел вашу проблему. и он находится на #container. Вы установили, что width:500px; изменить его max-width: 500px; или width:auto;