Pessoal, Tive que fazer uma pequena alteração na media querie do tópicos para que os links, não ficassem sobrepostos. Isso é algum erro no código ou pode ser apenas uma resposta para uma viewport diferente? No caso, a instrutora alterou apenas o font-size dentro do media querie e eu tive que alteras as medidas do padding e adicionar um gap para afastar as ancoras...
segue o css: (topicos.css)
.topicos {
background: var(--azul-degrade);
text-align: center;
padding: 0.5em 0 1em 0;
}
.topicos__titulo {
color: var(--branco);
font-weight: 300;
margin: 1em 0 2em 0;
text-transform: uppercase;
}
.topicos__lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.topicos__item {
margin: 1.5em 0.5em;
}
.topicos__link {
color: var(--branco);
padding: 1em;
background-color: var(--laranja);
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
@media screen and (min-width: 1024px) {
.topicos {
padding: 0.5em 0 3em 0;
}
.topicos__lista {
gap: 24px;
}
.topicos__titulo {
font-size: 24px;
}
.topicos__link {
font-size: 24px;
}
}
a seguir o html:
...
<li class="topicos__item">
<a href="#" class="topicos__link">Marketing Digital</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">Agile</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">Startups</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">HTML & css</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">Python</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">OO</a>
</li>
<li class="topicos__item">
<a href="#" class="topicos__link">Java</a>
</li>
</ul>
</section>
...
</html>