Space between menu items-CodePudding

I'm trying to make menu on top bar but I want to make a little bit of space between each element. How can I make some space between each menu item?

.TopMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 40px
}

<div >
  <a  href="#home">Inicio</a>
  <a href="#tecnologias">Tecnologias Que Trabajamos</a>
  <a href="#labs">Labs</a>
  <a href="#contacto">Contacto</a>
  <a href="#legal">Legal</a>
</div>

CodePudding user response：

You should also add some styling to the a links. Adding :not(:first-of-type) makes sure this will only happen from the second item and onward

.TopMenu a:not(:first-of-type) {
    padding-left: 8px;
}

CodePudding user response：

Since you are using a flexbox container you can use the gap on your flex element as follows:

.TopMenu {
  gap: 10px;
}

CodePudding user response：

Just switch justify-content to space-between

Css:

.TopMenu{
display: flex;
align-items: center;
width: 50%;
height: 40px;
justify-content: space-between;
}

See it in jsfiddle