DanKud

Для изменения элементов по клику нужно использовать JavaScript. Самим CSS клик по элементу, кроме ссылки, не обработать. Например - https://codepen.io/anon/pen/JzLxqe

А причем здесь ваш монитор и другие? Вы что только для себя хотите сверстать страницу? :)
Используйте панель разработчика SHIFT + CTRL + I и задавайте нужное расширение для тестов. А для верстки прописывайте в стилях ширину/высоту в процентах. Используйте медиа-запросы для задания стиля в зависимости от расширения монитора. Да и просто для начала загуглите - адаптивная верстка

Для flex добавляйте свойство flex-flow: column nowrap говорящее о том, что элементы должны располагаться по вертикали. Но у вас вообще непонятный сумбур какой-то. Для чего эта куча div, которая там не нужна. Можно сделать проще - https://codepen.io/anon/pen/ErwLZy

Конкретно этот пример самый дефолтный на чистом коде. Не знаю по какой причине он может у вас не работать. Его достаточно просто скопировать и вставить в свой HTML-файл. Часто бывает, что написанный код использует какой-то процессор. То есть это не чистый код и по дефолту браузер его обработать не сможет. Он не будет работать если вы его просто вставите без обработки. Используемый процессор будет приписан в скобках в заголовке. Например HTML (Pug) - CSS (Stylus) - JS (Babel) и так далее. Если используется процессор, то чтобы получить чистый код прямо в окне Codepen достаточно просто выбрать в выпадающем меню блока (стрелка вниз) пункт View Compiled ... и код будет сразу же преобразован. Преобразованный код уже можно смело вставлять к себе и он будет обрабатываться браузером по дефолту. Так же могут быть подключены дополнительные библиотеки без которых код не будет работать. Чтобы посмотреть список подключенных библиотек надо нажать на настройки блока (шестеренка) и посмотреть есть ли в списке ссылки на них. Если есть ссылки на библиотеки соответственно вам тоже нужно их подключить в код. Ну а проще всего конечно зарегистрироваться на сайте. Нажать в правом нижнем углу Export -> Export .zip и получить архив с содержимым. Соответственно index.html это будет HTML-код. В папке css будет файл с CSS-кодом. В папке js будет скрипт с JS-кодом. Все эти файлы будут на чистом коде. Если использовались дополнительные процессоры, то код под них будет в соответствующих папках.

Через отладку причина достаточно легко находится. Нужно убрать position: relative у элемента <ul> в .mainmenu. Ну а по хорошему конечно надо переверстать все, как уже и посоветовали :)

Потому что надо добавлять обтекание (float) к элементам если хотите расположить их в горизонтальной плоскости. А вообще конечно лучше всего обратите внимание на display: flex и почитать документацию про него:

.....
.filed_input div {
    display:inline-block;
    float:left;
}

Это не картинки. Гуглите octagon css - https://goo.gl/fMPQtv

<form>
    <fieldset>
        <legend>Телефон или адрес эл. почты</legend>
        <input style="border: none; width: 100%" type="text" name="name">
    </fieldset>
</form>

Это реализовано для того, чтобы была возможность добавлять другие элементы внутри <div> поверх картинки в случае необходимости. Так же в случае недоступности сервера картинки не будет появляться значок ошибки загрузки изображения, как при использовании <img>. Ну и немного сократится количество прописанных классов в CSS.