Estou criando uma seção que mostra os produtos que são oferecidos pela empresa. Usei um div usando flexbox e coloquei três ul. Acontece que as imagens estão criando margens à direita, alterando o espaço entre as imagens que eu buscava. Como posso resolver?
HTML
` <section class="nossos_produtos">
<div class="nossos_produtos_geral">
<ul class="nossos_produtos_cozinhas">
<li><img class="nossos_produtos_cozinhas_cozinha" src="/imgs/cozinha-serviço.png"></li>
<li><p class="nossos_produtos_cozinhas_texto">Cozinhas</p></li>
</ul>
<ul class="nossos_produtos_closets">
<li><img class="nossos_produtos_closets_closet" src="/imgs/closet-serviço.png"></li>
<li><p class="nossos_produtos_closets_texto">Closets</p></li>
</ul>
<ul class="nossos_produtos_quartos">
<li><img class="nossos_produtos_quartos_quarto" src="/imgs/quarto-serviço.png"></li>
<li><p class="nossos_produtos_quartos_texto">Quartos</p></li>
</ul>
</div>
</section>`
CSS
.nossos_produtos_geral{
padding: 1% 0 1% 3%;
display: flex;
justify-content: flex-start;
max-width: 90%;
}
.nossos_produtos_cozinhas{
display: inline-block;
position: relative;
}
.nossos_produtos_cozinhas_cozinha{
display: block;
position: relative;
width: 90%;
}
.nossos_produtos_cozinhas_texto{
position: absolute;
bottom: 4%;
left: 56%;
font-size: 200%;
color: var(--cor-secundaria);
text-transform: uppercase;
}
.nossos_produtos_closets{
display: inline-block;
position: relative;
}
.nossos_produtos_closets_closet{
display: block;
position: relative;
width: 90%;
}
.nossos_produtos_closets_texto{
position: absolute;
bottom: 4%;
left: 60%;
font-size: 200%;
color: var(--cor-secundaria);
text-transform: uppercase;
}
.nossos_produtos_quartos{
display: inline-block;
position: relative;
}
.nossos_produtos_quartos_quarto{
display: block;
position: relative;
width: 90%;
}
.nossos_produtos_quartos_texto{
position: absolute;
bottom: 4%;
left: 58%;
font-size: 200%;
color: var(--cor-secundaria);
text-transform: uppercase;
}