Ankhena

Задавайте им по одной границе.
https://jsfiddle.net/kjm80uso/

.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>

и размеры, понятное дело. Сам инпут скрыть.
Либо
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label

На CSS так
https://jsfiddle.net/tqg0Le91/
или так: https://jsfiddle.net/a734zx6o/
позиционируйте как вам нравится, думаю мысль понятна.

Либо на JS. Решений в инете полным полно.

1. Ссылки внутри другой ссылки не бывает (у вас у этих ссылок еще и одинаковый href, тем более не понятно зачем 2 ссылки).
2. Затемнение это псевдоэлемент, наложенный поверх блока и имеющий фоновый цвет с нужной вам прозрачностью.
3. Показ блока при наведении на родительский:

.goods-out a:hover .hid

да, так
Как только исправите ошибки с вложенными ссылками и закроете тег img все заработает.

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

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

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

1. Прозрачность:
- градиенты
- цвета в формате rgba

2. Наложение псевдоэлемента с фоновым градиентом на картинку https://jsfiddle.net/57caskbu/

3. С кнопкой тоже самое, пример у Dnebl

https://codepen.io/anon/pen/pOqqPN
с полями у картинки разберитесь, станет легче

https://jsfiddle.net/cvhtzm1e/ Это вариант с добавлением класса.

Умнее убирать href у ссылки, которая не должна быть ссылкой. И использовать селекторы атрибутов и :not. https://habr.com/post/85920/

вот так: https://jsfiddle.net/h4yqwLmt/

Нужно добавить пустые блоки в количестве максимальная вместимость родителя минус 1
jsfiddle.net/Lznyb6r8

https://jsfiddle.net/49dLtjxp/

:last-child берет последний элемент своего родителя.

Ваша структура

<li class="nav-menu__item clearfix">
  <div class="circle">
     <div class="inside-circle"></div>
  </div>
  <a href="#about-us" class="nav-menu__link">О нас</a>
 </li>

И .circle:last-child::before Последний элемент родителя элемента с классом .circle
И выходит это ссылка nav-menu__link

Вывод: начинать надо с nav-menu__item:last-child .circle::before {}

Поменять inline-block на block для мобилок.

Плагин называется чистый CSS
https://webref.ru/css/object-fit

Ширина body: 1187px

А если у другого человека другое значение? Т.е. не если, а просто другое.

Если вам нужен фиксированный контейнер 1040px, то так и надо его задавать. Зачем проценты, если он фиксированный?

Если ширина контейнера все таки резиновая и зависит от ширины окна и, к примеру, вам нужны отступы по 5% с каждой стороны, то ширина контейнера будет 90%.

На базе вот этого (делала с другой целью): https://jsfiddle.net/Ankhena/tevpLmbn/ делаете 6-ти угольную рамку. Вместо слова "кнопка" ваша шрифтовая иконка.
Ну и при наведении меняете какие хотите цвета.

Но я за SVG.