How to make a menu?

.wrapper { max-width: 1200px; /* padding: 0 15px;*/ margin: 0 auto; /* border: 1px solid #ff0 ;*/ } .ro { position: relative; } .logo { background-image: url('../img/logo.png'); background-repeat: no-repeat; position: absolute; left: -15%; top: 20%; } .menu { display: flex; justify-content: flex-start; /*justify-content: center;*/ /* align-items: center*/ } .menu-list { list-style-type: none; display: flex } .menu-list2 { display: flex; align-items: center; list-style-type: none; } .menu__kompani { color: #fff; margin-left: 24px; } .menu__kompani:first-child { margin-left: 0; } .menu__item { margin-left: 3px; color: #fff; } .menu__item:first-child { margin-left: 0 } .menu__item2 { margin-left: 24px } .menu__item2:first-child { margin-left: 0 } .poisk { background-color: red; width: 23px; height: 23px; display: flex; justify-content: center; align-items: center; } .menu__item2_tel { color: #fff } .aa { display: flex; justify-content: flex-end; } .menu-list3 { display: flex; justify-content: flex-end; background-color: #4f4f4f; list-style-type: none; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #808284; } .menu__item3 { display: flex; align-items: center; border-right: 1px solid #4e5358; padding-right: 17px; color: #fff; } .m { line-height: 20px; } .menu__item3_img { margin-right: 17px; } 

 <header class="header"> <div class="wrapper"> <div class="ro"> <div class="logo"> <img src="img/logo.png" alt="" class='logo__img'> </div> <div class="menu"> <span class="menu__kompani"> О компании </span> <span class="menu__kompani"> Контакты </span> <ul class="menu-list"> <li class="menu__item"> <img src="img/icons/in.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/youtube.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/tw.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/inst.png" alt=""> </li> <li class="menu__item"> <img src="img/icons/CCl_logo_цветн.png" alt=""> CCL </li> <li class="menu__item"> <img src="img/icons/angl.png" alt=""> </li> </ul> <ul class="menu-list2"> <li class="menu__item2 poisk"> <img src="img/icons/poisk.png" alt=""> </li> <li class="menu__item2"> <img src="img/icons/Инстаграм_копия.png" alt=""> </li> <li class="menu__item2"> <span class="menu__item2_tel"> +7 499 110 58 32 </span> </li> </ul> </div> <div class="aa"> <ul class="menu-list3"> <li class="menu__item3"> <img src="img/RF.png" alt="" class='menu__item3_img'> <div class="m">EAS системы </div> </li> <li class="menu__item3"> <img src="img/Датчики.png" alt="" class='menu__item3_img'> <div class="m">Датчики </div> </li> <li class="menu__item3"> <img src="img/Этикетки.png" alt="" class='menu__item3_img'> <div class="m">Этикетки </div> </li> <li class="menu__item3"> <img src="img/аксессуары.png" alt="" class='menu__item3_img'> <div class="m">аксессуары</div> </li> <li class="menu__item3"> <img src="img/Исходная_маркировка_st.png" alt="" class='menu__item3_img'> <div class="m">Исходная <br>Маркировка ST</div> </li> <li class="menu__item3"> <img src="img/RFID.png" alt="" class='menu__item3_img'> <div class="m">RFID </div> </li> <li class="menu__item3"> <img src="img/Слой_3_копия.png" alt="" class='menu__item3_img'> <div class="m">ALS <br> Этикетки</div> </li> </ul> </div> </div> </div> </header>