Menu de imagens cobrindo todo o topo

[Ênio Sales 0]

Bom pessoal, minha dúvida parece simples, mas está me dando uma dor de cabeça imensa. Pretendo colocar um número x de imagens como menu fixo no topo da página, ocupando toda largura da mesma, e que fiquem divididas igualmente, como no menu mobile do Facebook. Ja tentei com li{display:inline;width:x%} div, nav, th{width:x%;} e nada. Onde será que estou errando?

###		Com div's (ou trocando os div's por li [dentro de um ul])		###

<nav id="menu">
	<div class="item">
		<a href=".">
			<img class="mbtn" src="house.svg"/>
		</a>
	</div>
	<div class="item">
		<a href=".">
			<img class="mbtn" src="envelope.svg"/>
		</a>
	</div>
	<div class="item">
		<a href=".">
			<img class="mbtn" src="link.svg"/>
		</a>
	</div>
	<div class="item">
		<a href=".">
			<img class="mbtn" src="avatar.svg"/>
		</a>
	</div>
</nav>

###		Com tabelas			###

<table>
	<tr id="menu">
		<th class="item">
			<a href=".">
				<img class="mbtn" src="house.svg"/>
			</a>
		</th>
		<th class="item">
			<a href=".">
				<img class="mbtn" src="envelope.svg"/>
			</a>
		</th>
		<th class="item">
			<a href=".">
				<img class="mbtn" src="link.svg"/>
			</a>
		</th>
		<th class="item">
			<a href=".">
				<img class="mbtn" src="avatar.svg"/>
			</a>
		</th>
	</tr>
</table>
	
	O css (ignore o display:inline; quando com tabelas)		

#menu{
	width:100%;
	position:fixed;
}
.item{
	display:inline;
	width:25%;
}

Como são quatro ícones, a área (div, li ou th) de cada um deveria ocupar 25% da largura da página, no entanto não é isso que ocorre. Não posso usar {em, rem, px, pc} pois a largura variará.

[Aphrodi 10]

tente com esse css:

#menu {
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-around;
}

 

[eniocsj 0]

Não conhecia a propriedade "justify-content" muito menos o valor "flex" para "display". Vivendo e aprendendo. Ficou perfeito!
Obrigado.