Na aula a instrutora colocou o container-fluid na
. No entando, no navegador aparece 4 carts em cima e dois em baixo quando eu testo no navegador. Quando removo o container-fluid da section e coloco na fica tudo certo 3 cards em cima e 3 cards em baixo todos alinhado. Mas, no da instrutora mesmo ela colocando no section ela testou no navegador e ficou tudo certo. Eu não entendi???
<!--CARDS-->
<section class="bg-light" id="receitas">
<div class="row justify-content-center container-fluid">
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-abacate.jpg" class="card-img-top card-posicao-imagem" alt="...">
<div class="card-body">
<h5 class="card-title">Tigela de abacate</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-kiwi.jpg" class="card-img-top card-posicao-imagem" alt="...">
<div class="card-body">
<h5 class="card-title">Salada de kiwi</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-mix.jpg" class="card-img-top card-posicao-imagem"
alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
<div class="card-body">
<h5 class="card-title">Mix de vegetais</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-pimentoes.jpg" class="card-img-top card-posicao-imagem"
alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
<div class="card-body">
<h5 class="card-title">Pimentões à Juliana</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-oriental.jpg" class="card-img-top card-posicao-imagem"
alt="tigela com salada de vegetais estilo oriental, vista de cima">
<div class="card-body">
<h5 class="card-title">Prato oriental</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
<article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="src/img/receita-beterrabas.jpg" class="card-img-top card-posicao-imagem"
alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
<div class="card-body">
<h5 class="card-title">Beterrabas assadas</h5>
<p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
<a href="#" class="btn botao-cor-especial">Veja a receita</a>
</div>
</article>
</div>
</section>
MEU ARQUIVO CSS:
.card-largura {
max-width: 18rem;
}
.imagem-carrossel-um {
object-fit: cover; /* propriedade object-fit -> comportamento da imagem em rel. ao container/ cover -> vai preencher o container preservando a proporção o que ficar fora ela corta*/
object-position: 0 80%; /*propriedade 0 é o eixo x cortar mais a imagem na parte de cima e mostrar mais as caixas*/
height: 400px;
}
.imagem-carrossel-dois {
object-fit: cover;
/*object-position: 0 80%;*/
height: 400px;
}
.fonte-titulo {
font-family: 'Pacifico', cursive;
}
.texto-cor-especial {
color: darkred;
}
.botao-cor-especial {
background-color: darkred;
color: white;
}
.borda-cor-especial {
border-color: darkred;
}
.card-posicao-imagem {
object-fit: cover;
/*object-position: 0 80%;*/
height: 200px;
}