inkShio

если у сайта не одна страница, то для каждой нужно писать css в отдельном файле?

нет

но ведь на страницах много одинаковых элементов, таких как header, footer.

вот и ответ на твой вопрос.
Делаешь много разных файликов input, textarea, button, footer, header и т.д. После с помощью gulp или webpack склеиваешь их в один.
Зайди на github и посмотри сборки, многое прояснится.
Вот одна из многих статей.

Не знаю что ты хочешь в итоге получить, но чет у тебя там беда.

.footer-widgets {
    height: 180px; <- Это удалить
}

.sidebar-column {
    position: relative;
    bottom: 70px; <- Это удалить
}

.widget-area .widget {
    position: relative;
    margin-bottom: 55px; <- Это удалить
}

и будет у тебя нормальный футер

Ты выбираешь 2-ой параграф в блоке, но второго параграфа у тебя нету, вместо него у тебя там h1. Пиши p:nth-child(3)

Вот хотел спросить, когда нужно добавлять префиксы браузеров?

Если просто интересует когда, заходи на caniuse вбиваешь допусти flexbox и смотришь версии браузеров, у одних будет написано полностью поддерживается, у других частичная поддержка, поддержка с помощью --moz и т.д. Ну а что бы не заморачиваться с этим всем, как уже посоветовали использовать autoprefixer.

в modal-container добавь left: 0; top: 0;

переопределние в media

все верно

codepen.io

caniuse.com

В общем особо не понятно, что тебе надо.
1. Если ты имеешь виду адаптивность, то используй медиазапросы и почитай про nth-child (тут можно выбирать каждый четный, не четный, каждый третий элемент и т.д. и т.п).
2. Или вот тебе еще вариант для размышления

А подробнее? Твои скрин ни о чем не говорит. Нужен код.
Если это flexbox то пиши justify-content: center;

Подсказали на другом сайте.
Для .list__content
Вариант 1

width: calc(100% - 200px);
max-width: 76.92308%;

Вариант 2
width: min-content;

Если я правильно понял из твоего описания, то ты можешь использовать пример из документации "Slider Syncing".

В slick активному слайду присваивается класс slick-active

Соответственно ты можешь просто прописать стиль
Примерно так

#MYSLIDER .slick-active .MYLINE {
  тут стиль твоей линии
}