Вадим Кот

Почему браузер читает CSS-селекторы справа налево

.item:nth-child(3n) {
  border: none;
}

codepen

с бутстрап обертками:

.col-md:nth-child(3n) .services-item{
  border: none;
}

codepen

https://github.com/aFarkas/lazysizes

В плане seo гугл бот точно видит картинки - можно убедиться в search console в сканирование->Просмотреть как Googlebot. Яндекс нужно протестировать аналогично гуглу в вебмастере.

В статье гугла по ссылке Александр Талалаев есть раздел Lazy loading libraries

https://codepen.io/WhoIsAndrew/pen/QGLeMP
https://codepen.io/CiTA/pen/ALVWzg
https://codepen.io/geoffgraham/pen/vWJeOP
https://codepen.io/mihaelnikic/pen/yJLJYG

Чтобы была поддержка в IE svg спрайта из внешнего файла нужно использовать полифилы https://github.com/jonathantneal/svg4everybody или https://github.com/Keyamoon/svgxuse

Вы не поверите, но вопрос по верстке именно такого элемента уже задавался в прошлом году и имеет несколько решений Как сверстать это?

Модификатор нельзя использовать самостоятельно https://ru.bem.info/methodology/quick-start/#%D0%9...

или так (останется только тени добавить)

Лучше

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Тогда у любого враппера можно определить box-sizing отличный от border-box и все его дочерние элементы унаследуют от него. А иначе придется у всех внутренних элементов переопределять box-sizing.
https://css-tricks.com/box-sizing/

Примерно также как и на флексбоксе делается - для начала сделать высоту body в 100%
https://codepen.io/anon/pen/QQwYav

Вопрос полностью дублирует уже решенный Как осуществить данный hover эффект?

одно из них сдвинуто влево и вверх а под ним фон

дизайнер предусмотрел состояния элемента и сделал один под hover

https://jsfiddle.net/5gjfufub/3/

Когда вы устанавливаете font-size для root элемента (html) в абсолютных величинах (в данном случае в пикселях), блокируете возможность масштабирования с помощью увеличения размера шрифта браузера, что не очень хорошо по отношению к людям с плохим зрением. В вашем случае padding top и bottom всегда будут равны 50px. То же самое и с другими величинами, установленными в rem. Ваши стили позволяют только изменить эти 50px с помощью медиа-выражений, меняя font-size для html. Чтобы оставить возможность масштабирования через размер шрифта браузера, нужно чтобы font-size для html был в процентах. Если хотите, чтобы было кратно 10px, то

html {
  font-size: 62.5%;
}

Есть такой устаревший тег dir https://developer.mozilla.org/en-US/docs/Web/HTML/... - он в браузерных стилях по умолчанию имеет отступы сверху и снизу (стили одинаковы для ul, menu, dir). Зачем его используете (dir class="main-header clearfix")? Очепятка?
Из косяков header не закрыт и background-attachment: relative сами придумали?
Для .header в background после url зачем точка с запятой?
https://validator.w3.org/ - избавил бы сразу ото всех этих вопросов.

woff не поддерживается IE8- и opera mini. Счаcтливые обладатели этих браузеров и жалуются.
Google любезно со всеми делится, какие форматы и для каких браузеров нужны https://developers.google.com/web/fundamentals/per...
В chrome dev tools стили выглядят так:

font-family: 'PT Sans Narrow', '雅黑', '文泉驿微米黑', '黑体', sans-serif;

уберите ненужное из font-family

"Как растянуть блок .b-body на всю оставшуюся высоту"
https://jsfiddle.net/o53y2v5a/1/
"+ выровнять по центру?"
А вот здесь по подробнее опишите, что именно выравнивать?