megazvero

.main-header {
    overflow: hidden;
}

Потому что вы так стили указали. Делаете меню видимым только по ховеру на .main-header__menu. Увели курсор на другой элемент - меню пропало.

Надо показывать меню по ховеру и на самом меню тоже:

.main-header__menu:hover + .main-header__wrap-submenu,
.main-header__wrap-submenu:hover {
  opacity: 1;
  visibility: visible;
}

Так?

https://codepen.io/xdevelx/pen/ExjpGJB

3 итема

горизонтально или вертикально? Если горизонтально, то в чем проблема выводить по 20%? Если вертикально, то css columns.

Нет смысла.

https://jsfiddle.net/eg03uc62/2/

все такого же размера, просто один на другой наложился

.project__circle span::after {
	  right: -11px;
	}

Если имелся в виду вертикальный центр https://jsfiddle.net/uedjfcLq/
галочку сами поднимите по аналогии

Для не стандартной ситуации применяем SVG

.block__item {
  max-width: 50px;
  width: 100%;
}

.block__text {
  position: relative;
  padding-left: 20px;
}

.block__text::after {
  position: absolute;
  content: ' ';
  top: 30px;
  background-color: red;
  width: 2px;
  left: 35px;
  height: 250px;
}

img{
  margin-top: 260px;
  width: 30px;
  display: block;
  margin-left: 20px;
}