Drovosek01

Да, это хорошо, это древняя фича, браузер выбирает протокол такой же как у странице с которой переходят по ссылке.

html, body {
  height: 100%;
}
body {
  display: table;
  width: 100%;
}
#contacts {
  display: table-row;
  height: 100%;
}
#contacts > .container {
  display: table-cell;
  vertical-align: middle;
}

В вашем примере дополнительная обертка не нужна
https://codepen.io/anon/pen/dgbbNW

Она может понадобится, например, если у блока должно быть фоновое изображение на всю ширину экрана, а контентная часть при этом иметь фиксированный (ограниченный) размер.

Альтернатива это calc и media условие на 500 точках (или на 500 + запас на отступы)
https://codepen.io/anon/pen/KGPOmX

Да изучите вы уже как устроены шрифты... css-live.ru/css/metriki-shrifta-line-height-vertic...
Постоянно об одном и том же спрашивают.

Очень плохой совет выше. Если верстать то так

.container {
  max-width: 1200px;  // делаем резиновым
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

Дальше вам нужно поучить меда запросы:
Статья
Видео

Как правильно верстают контейнер для контента:

.container {
  width: calc(100% - 32px);  // отступ по 16px в случае если страница <= 1024px
  max-width: 1024px;  // размер для примера
  margin: 0 auto;
}

max-width можно задать 100% и напрямую задать padding, само собой к ширине + 32px

.container {
  width: 100%;
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
    max-width: 100%;
    height: auto;
}

В проводнике "Вид-Параметры" Убрать галочку "Показывать часто используемые папке в панели быстрого доступа"

еще вариант https://codepen.io/anon/pen/dqGWRz

Никакую ширину под контент подстраивать не надо. Расположите элементы в обратном порядке - тогда заработает селектор .myLink:hover ~ .marker, а чтобы они отображались по-старому, можно использовать flex. Как-то так.

https://jsfiddle.net/zth7s63b/3/

Я так понимаю, список месяцев должен разворачиваться по клику на год. Добавьте свойство activeYear, в обработчике клика выполняйте соответствующее присваивание, а в список месяцев (кстати, у вас там косячок - элементом списка является не ul, а li, так что ngFor стоит переместить) добавьте *ngIf="year === activeYear". Типа так:

activeYear = null;

log(year) {
  this.activeYear = this.activeYear === year ? null : year;
}

<div class="middle-content" *ngFor="let year of years">
  <a class="middle-content_top-indent" (click)="log(year)">{{ year }}</a>
  <ul class="list-of-month" *ngIf="year === activeYear">
    <li *ngFor="let month of months">
      <span class="list-of-month__marker"></span>
      <a href="#">{{ month }}</a>
    </li>
  </ul>
</div>

Вы указали состояние к которому осуществляется переход, вместо того, чтобы стилизовать должным образом сам элемент. Либо впишите применяемую ширину непосредственно в css, либо укажите её в качестве подстановочной. Должно было получится что-то вроде этого?