Алексей Хацер

#result{
    font-size: 30px;
    color: #fff;
    border: 1px #000;
    border-radius: 10px;    
    background-color: #ff715b;
    border-style: none;   
}
#result:not(:empty) {
    padding: 10px;
    box-shadow: 5px 5px 5px #e4887a;
}

UPD. Проблема исчезает, когда убираю в "container" свойство position: absolute;

Абсолют выводит элемент из потока. Родительский элемент и соседи перестают о нем знать.

Поскольку других детей нет, header имеет нулевую высоту -> вы не видите фона.

Может в таком случае нужно правильно разбить разметку в самом HTML?

Может быть.
Но чтобы сказать точно, нужно видеть макет (и возможно ТЗ)

p.s.
Интересно, что вы хотели сказать этим кодом

font-family: 'Playfair Display', serif;
font-family: 'Montserrat', sans-serif;