Elementos do Grid desalinhados verticalmente

Você quer dizer as boxes ficarem ao centro da tela? Alinhamentos verticais são feitos via justify-content: center;, enquanto horizontais via align-items: center;.

Não, na verdade acho que eu preciso mandar um print de como ficou, mas não sei como fazer isso. Os boxes ficaram com larguras diferentes, pequenas diferenças de largura mas ficaram. Gostaria de saber se é possível ajustar isso. Como faço para mandar um print por aqui?

Oi Danilo tudo bem?

Pode usar o imgur.com para subir o print e cole aqui o link dele.

Olá André! Tudo bem e contigo? Segue o link da imagem. Obrigado!

Tela Alurinha

Cara posta o código no https://jsfiddle.net/

O código está aqui:

https://jsfiddle.net/danzekic/hda3p87z/4/

Faltaram os arquivo style.css e reset.css, coloca tudo em um só que separo aqui

Assim resolveu pra mim:

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

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

Esse é o style.css body { background-color: #F2F5F7; font-family: 'Open Sans',Arial,sans-serif; }

.container { width: 94%; margin: 0 auto; }

.cabecalhoPrincipal { background-color: #FFF; padding: 20px 0; }

.cabecalhoPrincipal-titulo { font-weight: bold; font-size: 2em; margin-bottom: 20px; }

.cabecalhoPrincipal-titulo a { text-decoration: none; color: inherit; }

.cabecalhoPrincipal-nav-link { padding: 10px; margin-bottom: 10px; color: #9799A6; background-color: #FFF; text-decoration: none; transition: .5s; display: block;

border-bottom: 1px solid #9799A6;

}

.conteudoPrincipal { margin-top: 20px; margin-bottom: 20px; }

.subtitulo { font-weight: bold; font-size: 32px; margin-bottom: 10px; text-align: center; }

.conteudoPrincipal-cursos-link { height: 100px; background-color: #FFF; text-align: center; margin: 1%; transition: .3s; box-shadow: 2px 2px 2px #CCC; position: relative; }

.conteudoPrincipal-cursos-link a { text-decoration: none; color: #000; font-weight: bold; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.conteudoPrincipal-cursos-link:hover { box-shadow: 4px 4px 4px #CCC; }

.conteudoPrincipal-cursos-link a:before { content: ''; display: block; width: 50px; height: 50px; margin: 10px auto; }

.conteudoPrincipal-cursos-link:nth-child(even) a:before { background: url(../img/background1.svg) no-repeat;}

.conteudoPrincipal-cursos-link:nth-child(odd) a:before { background: url(../img/background2.svg) no-repeat; }

.rodapePrincipal { background-color: #324C64; padding-top: 20px; }

.rodapePrincipal .subtitulo { color: #FFF; }

.rodapePrincipal-navMap-link { text-decoration: none; color: #FFF; margin-top: 10px; }

.rodapePrincipal-navMap-link { font-size: .9em; }

.navmap-list-title { font-weight: 700; font-size: 1.3em; margin: .9em 0; padding-left: .3em; padding-top: .2em; padding-bottom: .2em; }

.navmap-list-title + .rodapePrincipal-navMap-link { margin-top: 0; }

.navmap-list-title-bancoDeDados { color: #EC6E5A; border-left: 4px solid #EC6E5A; } .navmap-list-title-framework { color: #AD85BF; border-left: 4px solid #AD85BF; } .navmap-list-title-frontend { color: #5EC6F3; border-left: 4px solid #5EC6F3; } .navmap-list-title-backend { color: #25D285; border-left: 4px solid #25D285; }

.rodapePrincipal-patrocinadores { margin-top: 30px; background: #F2F5F7; padding: 20px 0; }

.rodapePrincipal-contatoForm { margin-top: 20px; text-align: center; }

.rodapePrincipal-contatoForm label[for=email-contato] { font-weight: bold; font-size: 14px; color: #000; margin-bottom: 5px; display: block; }

.rodapePrincipal-contatoForm-emailInput { border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding: 10px; }

.rodapePrincipal-contatoForm-submit { border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #4DBA7A; color: #FFF; cursor: pointer;

}

.rodapePrincipal-contatoForm-submit, .rodapePrincipal-contatoForm-emailInput { outline: 0; border: 1px solid #4DBA7A; box-sizing: border-box; font-size: 16px; }

.videoSobre { background-color: #5E9EDC; padding: 25px 0;

}

.videoSobre-video { max-width: 100%; }

.videoSobre .container { color: #FFF; }

.videoSobre-sobre-title { font-size: 1.2em; font-weight: bolder; }

.videoSobre-sobre { font-size: 1.3em; line-height: 2; }

.videoSobre-button { border-radius: 8px; background-color: #ec6e5a; display: block; color: #FFF; border: none; height: 50px; font-size: .8em; outline: none; }

.rodapePrincipal-contatoForm-legend { margin-bottom: 10px; }

@media(min-width: 769px) {

.container {
    width: 85%;    
}

.subtitulo {
    text-align: left;
}

.cabecalhoPrincipal-nav-link {
    border-radius: 5px;
    border: 1px solid #9799A6;
}

.cabecalhoPrincipal-nav-link:hover {
    color: #FFF;
    background-color: #9799A6;
}

.cabecalhoPrincipal-titulo {
    margin: 0;
}

.cabecalhoPrincipal-nav {
    width: auto;
}

.cabecalhoPrincipal-nav-link {
    width: auto;
    margin: 0 0 0 10px;
}

.rodapePrincipal-contatoForm {
    margin-top: 0;
    text-align: left;
}

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

.conteudoPrincipal-cursos-link:nth-child(3n+1) {
    margin-left: 0;
}

}

@media(min-width: 1000px) { .conteudoPrincipal-cursos-link { margin: 1.333%; }

.conteudoPrincipal-cursos-link:nth-child(3n) {
    margin-right: 1.33%;
}

.conteudoPrincipal-cursos-link:nth-child(3n+1) {
    margin-left: 1.333%;
}

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

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

.videoSobre-sobre {
    margin-left: 1.5em;
}

}

Esse é o reset.css

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Então Rafael, a sua sugestão não resolveu no meu arquivo. Eu devo ter feito alguma coisa diferente e bem sutil do que o instrutor recomendou, pra estar aparecendo diferente. E o space-evenly não aparece nas sugestões do Sublime pra mim, você sabe dizer o porquê? Obrigado pela ajuda!

Entendi, vou analisar teu código e amanhã te digo.

https://jsfiddle.net/rafaelguinho/kmvb4h8q/5/ tá nesse link o que você precisa. Tinha definição de margem espalhada por todo css centralizei em um ponto só.

Valeu Rafael! O interessante é que seu projeto ficou com alinhamento perfeito e o projeto final do instrutor não! Ou seja, o seu seria mais adequado de apresentar como final. Parabéns pela análise e obrigado pela ajuda, abraço!

Fico feliz em ajudar, marca o tópico como concluído por favor.