Resolvido!!
Estou tendo dificuldade na hora de por as imagens ao lado desses elementos, já verifiquei e aparentemente não sei onde está o erro, sempre que tento a imagem não aparece.
Html Diferenciais container:
<section class="diferenciais container">
<ul class="diferenciais__lista">
<li class="diferenciais__item diferenciais__item-tempo">
<h2 class="item__titulo">Tempo</h2>
<p class="item__texto">Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente aos prazos.</p>
</li>
<li class="diferenciais__item diferenciais__item-foco">
<h2 class="item__titulo">Foco</h2>
<p class="item__texto">Focamos no empreendimento! Oferecemos serviços de qualidade com preços acessíveis.</p>
</li>
<li class="diferenciais__item diferenciais__item-especialistas">
<h2 class="item__titulo">Especialistas</h2>
<p class="item__texto">Equipe experiente e especializada! Testamos todos os produtos antes do lançamento.</p>
</li>
</ul>
</section>
css dos diferenciais:
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.diferenciais__lista {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.diferenciais__item {
max-width: 350px;
box-sizing: border-box;
padding: 2rem 0 2rem 5rem;
background-repeat: no-repeat;
background-position: top 1.25rem left 2.5rem;
}
.diferenciais__item-tempo {
background-image: url(/img/icone-relogio.png);
}
.diferenciais__item-foco {
background-image: url(/img/icone-dinheiro.png);
}
.diferenciais__item-especialistas {
background-image: url(/img/icone-quimica.png);
}
.item__titulo {
color: var(--cinza-escuro);
font-weight: 700;
font-size: 1.2rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.item__texto {
line-height: normal;
}