[Dúvida] Tópico diferente do Figma

Copiei o código porém o resultado não ficou igual. Não tem espaçamento entre os botões e eles não estão alinhados ao centro(ou com margens).

Segue o código:

HTML

 <section class="tópicos">
        <h2 class="tópicos__titulo">TÓPICOS VISITADOS RECENTEMENTE</h2>
        <ul class="tópicos__lista">
            <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Android</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Marketing Digital</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Agile</a><li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Startups</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">HTML e CSS</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Python</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">OO</a>
                <li class="tópicos__item"></li>
                <a href="#" class="tópicos__link">Java</a>
        </ul>
    </section>

CSS

.tópicos {
    background: var(--azul-degrade);
    text-align: center;
    padding: 1em 0;
}

.tópicos__titulo {
    color: var(--branco);
    font-weight: 300;
    margin-bottom: 1em;
}

.tópicos__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tópicos__item {
    margin: 0.5em 0.5em;
}

.tópicos__link {
    color: var(--branco);
    padding: 1em;
    background-color: var(--laranja);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}