[Dúvida] Dúvida sobre agrupamento de <img> em um <nav> | Alura

Boa tarde senhores,

estou praticando os conhecimentos que recentemente adquiri em CSS melhorando o aspecto de uma página da intranet onde trabalho. Coloquei um menu com links associados a imagens em substituição ao anterior que utilizava apenas texto. Porém me surgiu uma dúvida, coloquei as imagens do menu dentro de uma nav, de forma que eu possa controlar o deslocamento delas todas ao mesmo tempo utilizando a classe .menu-netuno, porém, não é o que acontece. Apesar das img serem filhos da <nav class="menu-netuno"> elas não deslocam junto com sua classe pai. Dessa forma, preciso alterar a posição de cada uma das imagens individualmente quando preciso alterar a posição do menu. Já tentei alterar o position das img para relative, mas mesmo assim o comportamento segue o mesmo.

Estou fazendo algo errado, ou o comportamento esperado é esse mesmo? Após definidas as posições das imagens, como eu poderia deslocar todas elas em conjunto?

Segue o trecho de código que criei para ser injetado na página (ao final segue uma imagem do aspecto final do menu):

/*CSS*/

<style>

body {
background-color: #EEEEEE;
}

.menu-netuno {
position:relative;
    width: 2200px;
    height: 2200px;
    background: url("fundo-menu.png") no-repeat; 
    background-size: 40% 45%;
    background-position-x: 650px;    
    background-position-y: 700px;

}

img:hover{
    scale: 1.1;
    transition: 1s all;
    cursor: pointer;
}

.peo {
    position: absolute;
    left: 780px;
    top: 100px;

}

.gestaoprojetos {
  position: absolute
    top: 400px;
    left: 1500px;
}

.gestaoprocessos {
  position: absolute;
    top: 1000px;
    left: 1550px;

}

.cartaservicos{
  position: absolute;
    top: 1600px;
    left: 400px;
}

.gestaoriscos {
  position: absolute;
    top: 1600px;
    left: 1200px;
}

.pco {
position: absolute;
    top: 1000px;
    left: 100px;
}

.avaliacaogestao {
position: absolute;
    top: 400px;
    left:150px;
}

.indicadores {
position: absolute;
    top: 900px;
    left: 800px;
}

.conselhogestao {
position: absolute;
    top: 1000px;
    left: 900px;
}

/*HTML*/

<body>

<main>

<nav class="menu-netuno">
<a href="https://www.ctmsp/pn-ddnm-peo"><img class="peo" src="PEO.png"></a>

<a href="default.asp"><img class="gestaoprocessos" src="GestaoProcessos.png"></a>

<a href=""><img class="gestaoprojetos" src="GestaoProjetos.png"></a>

<a href="https://www.ctmsp/pn-ddnm-pco"><img class="pco" src="pco.png"></a>

<a href=""><img class="gestaoriscos" src="GestaoRiscos.png"></a>

<a href=""><img class="indicadores" src="indicadores.png"></a>

<a href=""><img class="conselhogestao" src="ConselhoGestao.png"></a>

<a href=""><img class="cartaservicos" src="CartaServico.png"></a>

<a href="https://www.ctmsp/pn-ddnm-pmges"><img class="avaliacaogestao" src="AvaliacaoGestao.png"></a>
</nav>

</main>

</body>

![menu-netuno]

Chegou a hora de transformar