boa tarde.
Tô tentando deixar as 3 imagens alinhadas em uma única linha quando a tela cresce, mas minha tentativa de alterar o tamanho das imagens para 33% não está dando certo.
Eu gostaria de colocar o título PORTFOLIO em uma linha e, abaixo, as 3 imagens uma ao lado da outra.
Seguem os códigos:
HTML
<section id="portfolio" class="portfolio">
<h2> PORTFÓLIO </h2>
<img src="https://visualhunt.com/photos/l/1/black-and-white-abstract-architectural-detail.
<img src="https://visualhunt.com/photos/l/8/desk-workspace-speaker.
<img src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.
</section>
CSS
.portfolio {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.portfolio h2{
margin-bottom:20px;
}
.portfolio img{
max-width:100%;
height:auto;
}
@media screen and (min-width: 768px) {
.portfolio {
flex-flow: row wrap;
}
.portfolio h2{
text-align:center;
width:100%
}
img {
width=33%;
}
}