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

Question

Иконки в данном шаблоне накладываются друг на друга, и как это исправить, ума не приложу... По идее они должны размещаться в блоке равномерно, относительно его размеров. В другом шаблоне моем этот метод работает, а вот в новом нет... Уже все перепробовал.

.main {
position: fixed;
display: grid;
grid-template-areas: 
'logo menuleft photoprofile menuright settings';
grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
width: auto;
height: 40px;
top: 0px;
right: 50px;
left: 50px;
background-color: rgba(255, 255, 255, 0.466);
border-radius: 0px 0px 10px 10px ;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
transition: all 1s ease;
}

.logo {
position: absolute;
grid-area: 'logo';
width: 100%;
height: 30px;
top: 0px;
left: 10px;
right: 0;
bottom: 0px;
margin: auto;
font-size: 25px;
transition: all 1s ease;
}

.menuleft {
position: absolute;
grid-area: menuleft;
width: 100%;
height: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background-color: rgba(151, 238, 223, 0.329);
transition: all 1s ease;
}

.touchhome {
position: absolute;
width: 24px;
height: 24px;
top: 0px;
left: 0px;
bottom: 0px;
margin: auto;
cursor: pointer;
}

.touchmusic {
position: absolute;
width: 24px;
height: 24px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
cursor: pointer;
}

.touchsearch {
position: absolute;
width: 24px;
height: 24px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
cursor: pointer;
}

@media (max-width: 600px) {
.main {

    left: 10px;
    right: 10px;
}
.logo {
    font-size: 0;
}
}

<div class="main">
  <div class="logo">Logo</div>
<div class="menuleft">
  <span class="touchhome"><img src="img/ico/home.png"</span>
  <span class="touchmusic"><img src="img/ico/music.png"</span>
  <span class="touchsearch"><img src="img/ico/search.png"</span>
</div>
  </div>

БЛОГ НА HUSL

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

Ответы (0 шт):