Olá, poderiam me ajudar? Não consigo colocar uma interface do lado da outra, já tentei usar o flex, flexbox e até o inline, e mesmo assim ela fica com uma embaixo da outra. Gostaria de colocar 3 uma ao lado da outra(no codigo que estarei enviando só tem 2). Logo, gostaria que me ajudassem nesse probleminha, ficarei muito grato. Vi alguns vídeos mas mesmo assim nao consegui resolver, sempre altera a forma do produto ou algo do tipo.
.catalogo {
width: 1100px;
margin: 0 auto;
padding: 50px 0;
}
.catalogo li {
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
display: flex;
}
<main>
<ul class="catalogo">
<li>
<h2>Trilhas Rio de Janeiro</h2>
<img src="RJ.png">
</li>
</ul>
</main>
<main>
<ul class="catalogo">
<li>
<h2>Trilhas São Paulo</h2>
<img src="SP.png">
</li>
</ul>
</main>