Проблемы обычной блочной модели [14/23], и проблемы у меня!

Ребят, я что-то не понимаю. Выполнил я значит 14 задание и думаю “дай-ка протестирую полученную информацию”.
Вот написал свой код:

div.block1 {
margin-bottom: 20px;
padding: 10px;
background: blue;
width: 200px;
}
input[type=“text”] {
width: 100%;
padding: 0 20px;
background: red;

}
div.block2 {
width: 350px;
height: 250px;
background: yellow;
margin-top: 10px;

и вот чудо, почему-то несмотря на ширину полей в 100% + паддинги по горизонтали 20px поле не вываливается из родительского контейнера.
Новый точечный рисунок
Получается какое-то противоречие с полученной информацией из задания… Или я что-то не так сделал?

Если скопировать предложенный вами код на страницу с заданием, то всё работает ожидаемо правильно - поле выходит за пределы блока.

Но если открыть его в браузере, то все как на скрине (открывал в 3 разных браузерах)