Boa tarde! Quando finalizei a aula "Estilizando Destaques" ficou aparecendo uma barra de rolagem horizontal na parte inferior da página, já tentei ver as outras dúvidas do fórum marcadas como concluídas mas sem sucesso. Segue meu código:
.caixa {
align-items: flex-end;
display: flex;
justify-content: center;
}
.destaques {
display: grid;
grid-gap: .2rem;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33.33% 33.33% 33.33%;
height: calc(100vh - 50px);
}
.destaques__titulo {
background: rgba(0, 0, 0, .5);
color: #fdfdfd;
padding: .6rem;
text-align: center;
width: 100%;
}
.destaques__principal {
background: url('../img/fortnite.jpg') center / cover no-repeat;
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.destaques__secundario:nth-child(2) {
background: url('../img/pubg.jpg') center / cover no-repeat;
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.destaques__secundario:nth-child(3) {
background: url('../img/slack.png') center / cover no-repeat;
grid-column: 4 / 5;
grid-row: 2 / 3;
}
.destaques__secundario:nth-child(4) {
background: url('../img/whatsapp.png') center / cover no-repeat;
grid-column: 4 / 5;
grid-row: 3 / 4;
}
.destaques__secundario:nth-child(5) {
background: url('../img/cs-go.jpg') center / cover no-repeat;
grid-column: 3 / 3;
grid-row: 3 / 3;
}
.destaques__categorias {
grid-column: 1 / 3;
grid-row: 3 / 3;
}
.destaques__categorias___lista {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: space-between;
}
.destaques__categorias___item {
align-items: center;
background: #fdfdfd;
border-left: 5px solid transparent;
color: #333333;
display: flex;
padding: 1rem;
width: 50%;
}
.destaques__categorias___link {
color: inherit;
}
