CSS HTML Как сделать данные элементы в линию?

[askfmaskfaosflas]

<p><a href="https://vk.com/dlaremme"><img class="icon" src="icons/vk.png" alt="Изображения не загрузились =(. Сообщите разработчику сайта"></p></a>
<p><a href="https://www.blast.hk/members/442386/"><img class="icon" src="icons/blasthack.png" alt="Изображения не загрузились =(. Сообщите разработчику сайта"></p></a>

.icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 6%;
    padding: 5%;
}

 

[D3.Pheonix]

Заверни их в div обёртку и пропиши ей display: flex
Или удали <p>, поэтому и переносится

 

[askfmaskfaosflas]

Заверни их в div обёртку и пропиши ей display: flex
Или удали <p>, поэтому и переносится

А как сделать так, чтобы по ссылке переходило только если навести на иконку (если на пустое место навести, то тоже переходит). Также можно ли сделать меньше расстояние между ними, и сделать их по середине?

<div class="icons">
      <a href="https://vk.com/dlaremme"><img class="icon" src="icons/vk.png" alt="Изображения не загрузились =(. Сообщите разработчику сайта"></a>
      <a href="https://www.blast.hk/members/442386/"><img class="icon" src="icons/blasthack.png" alt="Изображения не загрузились =(. Сообщите разработчику сайта"></a>
    </div>

.icon {
    width: 6%;
    padding: 5%;
}

.icons {
    display: flex;
}