fourthMAN

https://codepen.io/magaapa5/pen/vYOoxzN
.navigation {
z-index: 10;
}
если нужно что бы перекрывал div из бугрер меню

По css
Глава профессиональная вёрстка, полезная, лучше прочитать
1 - новая большая книга css
Далее заострить внимание из книги на,
2 - Блочно строчная модель (+ фото прикрепил)
3 - Наследование
4 - Отступы margin, padding
5 - Каскадность
6 - Позиционирование ( Все виды и как работают, и момент когда Абсолютное позиционирование относительно )
7 - Flex + (иметь под рукой шпаргалку) + сайт https://flexboxfroggy.com/#ru
Со знанием flex box будет легче в бутстрапе, grid.
По вёрсте
Смотри стримы - https://www.youtube.com/channel/UCE_w6FxGfRKH2fU76...
И ему подобные, станут понятны моменты ( когда не понятно как делать )

И смотри сами сайты через devtools ( как всё реализовано ).

JS
Соракса смотреть такое себе, когда ещё не понимаешь основы.
Из популярных https://learn.javascript.ru и менее популярный https://metanit.com
там и задачи на темы есть.
Внимание заостри на
1 - Замыкании
2 - Область видимости
3 - Наследование
4 - асинхронность
Все задачи и примеры пиши руками ( без копипаста )
+ Не понятную тему смотри на ютубе более детально
Обязательно DOM можешь посмотреть видео Дмитрия Лаврика
https://www.youtube.com/watch?v=-2WiaSvOj78

Сделал думаю похожее что ты просил ( Код css ниже, просто вставь его )
Советую больше уделить вниманию самому css, будет меньше вопросов.
- Наследование
- Каскадность
- размеры min и max
- media запросам
Да и пиши стили в хронологическом порядке,
По типу
боди > div > и так далее сверху вниз стили.
Ещё есть классный видос по ошибкам новичков.
https://www.youtube.com/watch?v=y-odQFdFxdU
и по box-sizing
https://www.youtube.com/watch?v=IH_V0duSGLo

.wrapper {
max-width:1260px;
margin:0 auto;
height:auto;
}

header {
min-height:72px;
width:100%;
background: #FFFFFF;
box-shadow: 0 1px 28px rgba(0, 0, 0, 0.25);
}

header .wrapper ul {
display: flex;
justify-content: space-around;
line-height: 72px;
}

.sign-in,
.search {
font-size:16px;
}

.search {
color: #767;
min-width: 350px;
max-width: 100%;
height: 40px;
background: #EDEDED;
border-radius: 70px;
border:1px solid #EDEDED;
text-align:center;
outline:none;
}

a {
text-decoration: none;
}

.sign-in a {
color:#000;
display:block;
background: rgba(255, 255, 255, 0.4);
border: 2px solid #EDEDED;
width:94px;
height:40px;
border-radius: 22px;
margin:12px auto;
line-height:36px;
text-align: center;
}

.sign-in a:hover {
background: #EDEDED;
}

.sign-in a:active {
background: #E3E3E3;
}

.search:active,
.search:focus {
text-align: center;
text-indent:40px;
}

a .pic-logo {
position:relative;
top:5px;
left:10px;
}

ul {
padding:0;
margin:0;
list-style:none;
}

body {
margin:0;
font-family: Open Sans;
background:rgba(50,60,70,.7);
}

media (max-width:1200px) {
.wrapper {
max-width:1024px;
}
}

media (max-width:1023px) {
.wrapper {
max-width:768px;
}
}

/* media (max-width:767px) {
.wrapper {
max-width:420px;
}
} */

media (max-width:629px) {
.wrapper ul {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.pic-logo {
padding-right: 10px;
}
media (max-width:419px) {
.wrapper {
max-width:340px;
}
}

media (max-width:339px) {
.wrapper {
max-width:none;
}
}