Фёдор

Это должно помочь

.catalog-dropdown:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 45px;
}

Это если catalog-dropdown открывается вниз.
Суть в том, что с помощью before (или after) надо просто закрыть дыру. А так как before, в данном случае, является частью catalog-dropdown, то ховер не исчезнет.

Что за бредовые подсчеты знаний в процентном соотношении? Не занимайтесь ерундой, прекратите выдумывать эти мнимые значения - это невозможно подсчитать.
Пришли сюда за советом и помощи ищете? Постараюсь помочь:

1. Для начала, снизьте свои требования и ожидания от фриланса. Никто вам не будет платить и 2$/час на биржах. Вы не имеете опыта, не работаете с современными технологиями, нет портфолио, не умеете подстраиваться под других людей, и т.д.
   
2. Если что-то делаете - делайте нормально. Не нужно делать глупых умозаключений, что портфолио можно набить мусорными работами, найденными в интернете. Да, можно. А теперь спросите себя - нормально ли это? Если вы уже на старте пытаетесь сделать плохо? Тех, кто делает работу плохо предостаточно, а вот хороших, ответственных и грамотных специалистов - мало. Вторых хотят везде и спрос на них бесконечно велик. К кому хотите относиться?
   
3. Нарабатывайте портфолио. Не надо на начальных этапах гнаться за деньгами, на первых порах нужно набираться опыта, развивать навыки и очень много учиться. Делайте работу и просите, чтобы ее оплатили в таком размере, в каком заказчик посчитает нужным.
   
4. Верстать нужно много, не стоит лениться набирать код руками, даже если уже есть готовое решение и его можно скопировать. Лучше будете запоминать, быстрее соображать и научитесь быстро шлепать пальцами по клавиатуре.
   
5. Нужно много учиться, но при этом не распыляться. Я уже заметил, что вы с одного на другое перепрыгивать любите. То верстку, то программирование изучаете. Остановитесь на чем-то одном для начала, и когда будете чувствовать, что получается одно, то можно и другое будет начать.
   
6. Научитесь подстраиваться под других. Не надо думать, что вы самый классный и самый нужный - это не так. Вас легко заменить. Если вам говорят, что есть работа здесь и сейчас - соглашайтесь, это ваши перспективы и ваша возможность заработать. Если говорят, что готовы помочь прямо сейчас - ищите возможность получить ее, это нужно только вам, потом такой возможности может и не быть. Хотите развиваться как специалист - много работайте и научитесь лишать себя удовольствий. Если не научитесь - будете нытиком-ремесленником всю жизнь, который оправдания на все неудачи в ком-то ищет, а не в себе.
   

Ну и самое главный совет - забить на фриланс. Это рутина, от которой стремиться уйти любой нормальный человек. Фриланс - это работать 24 часа в сутки, самостоятельно дисциплинировать себя и формировать график индивидуально. Хотите расти и зарабатывать - ищите место, где вас примут в штат и будут готовы обучать.

const url = 'google.com';
const json = JSON.stringify({ url });
console.log(json);

Это не он указывал, а фигма.
Как и значения position: absolute, left и top.

Еще способы:
1. не использовать сборщики, а собирать вручную.
2. вообще не собирать, а подключать все подряд.

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

Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
Всякие JS и т.д. это просто следующий этап.

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

По началу полезно пролистывать справочник, потому что в голове остаются часто используемые решения, а о других возможностях забывается.

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)