Image does not change size - flexbox

Question

good afternoon.

I’m trying to get the 3 images aligned in a single line when the screen grows, but my attempt to change the image size to 33% is not working.

I would like to put the title PORTFOLIO in a row and, below, the 3 images next to each other.

Follow the codes:

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%;
    }
    }

Answer 1

.portfolio {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.portfolio h2{
    margin-bottom:20px;
}

.portfolio img{
    max-width:33%;
    height:auto;
}

    @media screen and (min-width: 768px) {
      .portfolio {
          flex-flow: row wrap;
      }
      .portfolio h2{
          text-align:center;
          width:100%
      }

      img {
          width=33%;
      }
    }

<section id="portfolio" class="portfolio">
    <h2> PORTFÓLIO </h2>
    <img src="https://visualhunt.com/photos/l/1/black-and-white-abstract-architectural-detail.jpg">
    <img src="https://visualhunt.com/photos/l/8/desk-workspace-speaker.jpg">
    <img src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg">
</section>

The part you’re doing wrong is this:

.portfolio img{
    max-width:100%;
    height:auto;
}

You are putting 100%, there so the images are not 33%.

Answer 2

I don’t understand if you want this behavior only on the responsive screen, but if it is just add this code inside the MEDIA SCREEN that will work, just adjust the height you want, hugs.

.titulo {
  margin-bottom:20px;
  text-align: center;
}

.portfolio {
  display: flex;
  justify-content: space-between;
}

.portfolio img {
  width: 30%;
}

<h2 class="titulo"> PORTFÓLIO </h2>
  <section class="portfolio">
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg" alt="" />
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg" alt="">
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg" alt="">
  </section>