Centralizar na horizontal e inline-block com espaço não calculado

Oi pessoal.

Estou estudando HTML e CSS. É tudo novo para mim. Então, essas minhas duas dúvidas devem ser coisas simples de resolver para vocês que são experientes :)

Com muito custo consegui desenvolver um menu na horizontal, com um submenu. Fiz um esqueleto no site JsFiddle (que uso pela primeira vez) e compartilho aqui o link:

https://jsfiddle.net/gustavodelvechio/v2eca515/#&togetherjs=vGxVnGT19F

Eu não consigo resolver duas coisas:

1) Não consegui alinhar o menu ao centro horizontal da página. Ele fica colado à esquerda.

2) Mesmo eu zerando todas as margens, ainda persiste um espaço entre os itens do menu(os "botões" com plano de fundo vermelho). Como eu poderia retirar esse espaço adicional?

Agradeço muito pela ajuda

Gustavo.