Не работает margin

Подскажите, пожалуйста, почему не работает margin-bottom у класса button. Я думал он увеличит картинку еще на 150px, но этого не происходит.

margin-bottom работает, просто вы не учли его выпадение https://htmlacademy.ru/courses/44/run/10

Но что делать, если мне не нужна рамка, а я хочу предотвратить выпадение?

вместо margin-bottom у .button - padding на родительский блок (внутри которого расположен .button)

Сейчас попробуем.

Сработало, спасибо. Кстати, в видео, по которому я делаю этот макет он говорит, что можно добавить padding-bottom и тегу header, будет ли это верным?

P.S. Я задал паддинг классу container и в этот момент почему-то начинает меняться ширина container.

а вы задали только padding-bottom - или паддинги со всех сторон? Если со всех, то да, правый и левый будут увеличивать ширину

Только снизу

я в вашем codepen’е убираю margin-bottom у ссылки и задаю padding-bottom:150px; для .container - и у меня ширина блока .container не меняется

или вы имеете ввиду что фоновый рисунок увеличивается? тогда это абсолютно нормально: у вас для фона задано cover; т.е. рисунок должен закрывать весь блок (см. https://htmlacademy.ru/courses/88/run/3 ) . Когда мы добавляем паддинг снизу, высота блока увеличивается и фоновый блок растягивается (с сохранением пропорций), чтобы полностью закрыть все увеличенное пространство блока.

точно, я даже и забыл про ковер. Спасибо большое : )