Марат Гарифуллин

Добавьте
Top: 20%;
Bottom:20%;

.searchicon {
  z-index: 10;
  position: relative;
}

Ну, у вас overflow: scroll не на том элементе, что ли. Он высотой 100% и скроллится...

*{
  box-sizing: border-box;
}
.grid{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.block{
  width: 100%;
  max-width: calc(25% - 40px);
  flex: calc(25% - 40px);
  margin: 0 20px;
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  &__desc{
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
  }
  &__title{
    display: block;
    margin-bottom: 10px;
  }
  &__text{
    margin: auto 0 0;
  }
}

У вас несколько проблем.

Блок .servicies-right почему-то float, отсюда он не на всю ширину

Текст абсолютно позиционирован относительно body (надо относительно .servicies-right, добавить position: relative)

после (.servicies-right, добавить position: relative) этого текст будет перемещаться, но появится еще ряд поправок, но, думаю, разберетесь.

https://developer.mozilla.org/ru/docs/Web/CSS/:any

Пока экспериментальная возможность, мало где работает.

Как-то так

#id :-webkit-any(input, button, fieldset) { ... }
#id :-moz-any(input, button, fieldset) { ... }
#id :matches(input, button, fieldset) { ... }
#id :is(input, button, fieldset) { ... }

Тут три шага

1. Перенести меню на правую сторону
заменить все (почти) left на right в скриптах, стилях и названиях классов в html (из animate.css)

2. переписать анимацию svg. Сейчас идет изменения с правой стороны, нужно перенести на левую.
Вот эти участки с { d: "..." }
Чтоб это поправить нужно про svg почитать немного

path.animate({ d: "M320 0 C480 "+(screenHeight/4)+" 480 "+(screenHeight*3/4)+" 320 "+screenHeight+" L0 "+screenHeight+" L0 300 L0 0 Z" }, 500, function() { /* ... */ });

3. после анимации открытия добавить nav класс open, перед анимацией закрытия убрать

nav {
  height: 100vh;
  overflow-y: hidden;
}
nav.open {
  overflow-y: auto;
}

Вам нужно отлавливать touchmove на элементе, который можно скроллить и отменять переключение экрана. Если доскроллили до конца элемента, то можно и экран проскроллить.

Либо добавить ползунок и текст скроллить только перемещением ползунка

Вот так пропадает. Предполагаю, что из-за того, что ширина (135.875px) получается не целая

.section-4 .section-service .btn {
    margin: 0;
    width: 135px;
    height: 39px;
}

У вас нет сетки, растяните таблицу на всю ширину экрана хотя бы)

.package {
  width: 100%;
}

так?

https://codepen.io/anon/pen/jXLNyO