Иван В

Если верно понял вопрос.
1. Получаете значение select. Как это делается почитайте тут.
2. Выводите значение в div. Как, смотрите здесь.

В примере вы не прокидываете ничего в Overlay.
Нужно написать так

const AddOrderModal = (props) => {
    return (
      <Overlay modalIsOpen={props.modalIsOpen}>
      .....
        </Overlay>
    );
};

В Main добавляете state, например, "показать-модалку" со значением false по умолчанию.
Также в Main делаете фунцию, например, "switchModal" в которой делаете setState({ "показать-модалку": !this.state."показать-модалку"}). На Button вешаете "switchModal" по клику.

Modal показываете в зависимости от state. Типа
{"показать-модалку" && <Modal />}

В сам Modal передаете props с функцией "switchModal".

Внутри Modal делаете функцию
closeModal = () => { this.props.switchModal() }
Вешаете "closeModal" на элемет по клику на который хотите закрывать Modal.

Привет, Megalexandros.
Вопрос - огонь. Очень актуальный.

Недавно смотрел запись доклада "История развития фронтенда в Яндексе за 10 лет". В какой-то момент докладчик сказал, что в 2009 году попасть в Яндекс мог обычный верстальщик, без особых знаний программирования и алгоритмов. Что собственно с ним, докладчиком, это и произошло. А сейчас, в 2019 году, подбор намного-намного сложнее и он мог бы только мечтать быть фронтом в такой компании.

Первая мысль была - "Вот ему повезло, проскочил в сферу когда это было легко, а я поздно начал". Но потом подумал "А точно ли легко?".

Я заметил, что сравнивания "тогда" и "сейчас", многие люди упирают на требования для начальных позиций. Мол, раньше от джуна требовали меньше, а сейчас целый СПИСОК навыков. Но при этом, упускают момент, что раньше получать знания, чтобы "войти в it" было НАМНОГО сложнее.

Раньше доступны только оффлайн-курсы (в больших городах) и справочники с задачниками. В помощь только тематические форумы и статьи с хабра.

Сейчас есть онлайн-тренажеры(веб и приложения), вебинары, наставничество, онлайн-курсы, Тостер :). Бизнес на "войти в it" как бы его не ругали, породил огромное количество источников информации (телеграм и youtube каналы, новостные сайты, подкасты и т.д.). И все это с контентом и для новичков, и для опытных людей. Хочешь смотри, читай, слушай.

Конечно хочется на это все сказать, что "вот раньше только "HTML, CSS, JS", а сейчас нужно знат зоопарк технологий!!!"
Но на самом деле "HTML, CSS, JS" так и остались, все прочее - это интрументы чтобы эффективнее и качественнее готовить этот самый "HTML, CSS, JS". Библиотеки, препроцессоры и фреймворки - это кайф. А если тяжело заходят, значит что вы еще плохо знаете основы.

Сейчас из настоящих новых сложностей только выбор стека. Нужно четко понимать чем вы хотите заниматься - делать сайты и натягивать их на CMS или делать веб-приложения\сервисы. Это два очень разных стека. Опытный веб-разработчик может владеть двумя сразу, новичок - никогда.

Тяжело было всегда, сместились только акценты.

Предлагаю третий вариант:

<section class="works">
    <div class="..."> <!-- здесь объедините свойства "wrap text-center" и "works__desc" -->
         <h2 class="works__title">Реализованные проекты</h2>
         <p>Коммуникационное агентство – часть многофункционального холдинга, объединяющего различные компании на территории России и ближнего зарубежья.</p>
         <p>Наши подходы к организации бизнеса и имеющиеся ресурсы позволяют одинаково эффективно обеспечивать реализацию как крупномасштабных федеральных или международных проектов, так и решать небольшие локальные задачи. Мы находимся в постоянном развитии, расширяя и укрепляя имеющиеся бизнес-направления, а также формируя новые.</p>
    </div>
</section>

В вашем втором варианте явно лишне делать два div'а "обертки" для текста.
Группировать текст нужно, например, если вы хотите этот текст каким-либо образом позиционировать или, например, ограничить длинну. "Оборачивать" в div ради самого оборачивания не имеет смысла.

<p style={{color: this.state.petrol > 0 ? '#ffffff' : '#D12828' }}>{this.state.petrol}l</p>

height: calc(100% - 10px);

Оберните h3 и input в div.
Div'у дайте свойство "display: flex"

Стоит ли создать новый контейнер для отдельной вёрстки хедера?

Стоит.
С помощью Pug можно и нужно разбивать верстку на отдельные компоненты.
Это удобно, как минимум, в ситуациях когда компоненты нужно использовать повторно. (Например, компонент с хедером можно использовать на новых страницах).

но тогда чтобы хедер был поверх картинки нужно будет его позиционировать абсолютно, с бутстрапом это не очень удобно

В чем неудобство? Судя по коду, вы совмещаете свои классы и классы бутстрапа. Так и нужно.
Бутстрап это сетка и, при необходимости, набор готовых решений (типа модалок, списков, кнопок и т.д.), которые можно кастомизировать по своему усмотрению.
В вашем случае, вы вообще собираетесь использовать только сетку. Тогда тем более нужны свои классы.

P. S. Вы немного неверно пишите на Pug.
У вас вот так -

div(class="home")
    div(class="container")
        div(class="row align-items-center")
            div(class="col col-lg-5")

А нужно писать так -

.home
     .container
        .row.align-items-center
            .col.col-lg-5

В скобках указывайте прочие атрибуты, типа src, href, alt и т. д.