2
respostas

Problemas na margin

Ele não está inserindo a margin a esquerda e também não está retirando a margin a direita. Não estou conseguindo entender. Os quadros também estão desalinhados.

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
    width: 23%;
    margin: 1%;
}

.conteudoPrincipal-cursos-link:nth-child(4n) { 
    margin-right: 0;
}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-left: 0;
}
<nav>
                <ul class="conteudoPrincipal-cursos">
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">PHP</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">.NET</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Pascal</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Desenvolvimento Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Java Web</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Javascript</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MySQL</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Postegres</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                    <li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
                </ul>
            </nav>
2 respostas

Boa tarde Márcia,

Copiei o seu código e aqui funcionou normalmente a retirada das margens da esquerda e direita.

Como está aparecendo aí? tem print?

Fiz aqui: Link

Sim como faço para enviar o print.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software