Preciso muito de uma ajuda

Estou com um problema de formatação de img, estou seguindo uma vídeo aula desse cara ai: https://www.youtube.com/watch?v=DaD-eRasQ1A&t=1731s , e fiz do mesmo jeito que ele fez, so que na formatação da img o meu fica diferente do dele:

abaixo segue meu código:

e segue minha minha pagina

agora olha como fica a dele

por favor me ajudem

Não temos como executar imagem pra poder verificar o problema. Posta em texto o código HTML, CSS e JS (se tiver).

#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%;

esse código e de CSS3, a parte de HTML ta legal ta tudo certo

para te explicar melhor, fiz a parte de HTML 5, ai depois fiz o parte de CSS3 e formatei a pagina para tamanho mobile, ai depois utilizei o códigoo @media (o media queries) para deixar ele em tamanho de pagina de web

E o HTML? Não temos como reproduzir o problema só com CSS.

UCreatEasy
 <nav> <!-- tag que endica links de navegação -->
 <a href="#">UCreatEasy</a>
      <ul> <!-- define uma lista não ordenada  -->
         <li><a href ="#sobre">SOBRE</a></li>
         <li><a href ="#servicos">SERVIÇOS</a></li>
        <li><a href ="#portfolio">PORTIFÓLIO</a></li>
        <li><a href ="#contato">CONTATO</a></li>
     </ul>
 </nav>
 
 <header> <!-- cabeçalho -->
    <h1>UCreatEasy</h1>
     <p>Rapido, simples e fácil.</p>
     <a href="#sobre"class="botao">VER MAIS</a>
 </header>
 
 <section id="sobre"> 
    <h2>SOBRE</h2>
     <p>Nossa maior missão é fazer você usuario ter a melhor UX já vista. </p>
     <a href="#contato"class="botao">ENTRE EM CONTATO</a>
 </section>
 
 <section id ="servicos">
    <h2>SERVIÇOS</h2>
     <div>
        <img src= "_imagens/configs.png" alt="configurações"/>
         <h3>Fácil Interaçao</h3>
         <p>Integra facilmente seu site e qualquer gerenciador de conteúdo.</p>
     </div>
     <div>
        <img src= "_imagens/hospedagem.png" alt="servidor"/>
         <h3>Hospedagem Moderna</h3>
         <p>Não deixe seus clientes na mão. Tenha seu site em 24hrs no ar.</p>
     </div>
     <div>  
        <img src= "_imagens/site.png" alt="navegador"/>
         <h3>Melhores Práticas</h3>
         <p>Código legivel, desenvolvido com as melhores práticas.</p>
     </div>
      <div>
        <img src= "_imagens/coracao.png" alt="Coração"/>
         <h3>Feito com amor </h3>
         <p>É melhor fazer seus sites com amor hoje em dia.</p>
     </div>
 </section>
 
<section id = "portfolio">
 <h2>PORTFÓLIO</h2>
 <div>     
    <img src="_imagens/portfolio-1.jpg" alt="cogumelo"/>
</div> 
<div>
    <img src="_imagens/portfolio-2.jpeg" alt="sol no horizonte"/>
</div> 
<div>
    <img src="_imagens/portfolio-3.jpeg" alt="pessoas á beira de um vale"/>   
</div>
<div>
    <img src="_imagens/portfolio-4.jpg" alt="floresta nevada"/>
</div> 
<div>
    <img src="_imagens/portfolio-5.jpeg" alt="praia deserta"/>    
</div>
<div>
    <img src="_imagens/portfolio-6.jpeg" alt="alce a beira de um rio"/>
</div>    
</section>
 
 <section id="contato">
    <h2>CONTATO</h2>
     <p>Entre em contato conosco.</p>
     <div>
        <img src="_imagens/fone.png" alt="telefone"/>
         <p><a href="tel:xx5555555">(XX)5555-5555</a></p>
     </div>
     <div>
         <img src="_imagens/contato.png" alt="e-mail"/>
         <p><a href="ucreat@gmail.com">ucreatEasy@gmail.com</a></p>
     </div>
 </section>
 
 <footer>
    <p>Desenvolvido por Edgar Silva.</p>
 </footer>

Aqui e o css:

body {
font-style: “Open Sans”, Helvetica, Arial, sans-serif;
color: #4d4d4d;
}

h1, h2, h3 {
margin: 0;
font-family: “Roboto Slab”, Helevetica, Arial, sans-serif;
font-weight: 700;

}

.botao {
color: white;
text-align: center;
text-decoration: none;
padding: 10px 30px;
background-color: #8f3faf;
font-size: .9em;
border-radius: 3px;
}

/Navegação/

nav {
display: flex;
flex-direction: column;
align-items: center;
background: #4d4d4d;
}

nav > a {
text-decoration: none;
text-align: center;
color: #f1f1f1;
font-weight: 700;
font-size: 28px;
font-family: Pacifico, serif;

}

nav ul {
list-style: none;
padding: o;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

nav ul li {
width: 100%;
text-align: center;
}

nav ul li a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-decoration: none;
color: #f1f1f1;
}

/cabeçalho/

header {
background-image: url(’…/_imagens/fundo.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
}

header p {
margin-bottom: 2em;
}

/sobre/

#sobre {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;;
padding: 0 20px 20px;
background-color: #8f2faf;
color: #f1f1f1;
}

#sobre p {
margin-bottom: 2.5em;
max-width: 1000px;
}

#sobre .botao{
background-color: #f1f1f1;
color: #8f3faf;
}

/Serviços/
#servicos {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

#servicos div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 30px;

}

/portfólio/

#portfolio {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;

}

#portfolio h2 {
margin-bottom: 20px;

}

#portfolio img {
border: 8px solid white;
box-shadow: 1px 1px 4px black;
width: 100%;
}

#contato {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
}

/footer/
footer {
text-align: center;
padding: 10px;
background-color: #4d4d4d;
color:#f1f1f1;
}

/MEDIA QUERIES/

@media screen and (min-width: 768px){
/NAVEGAÇÂO/
nav {
flex-direction: row;
justify-content: space-around;
}
nav ul {
flex-direction: row;
width: 70%;
}
/CABEÇALHO/
header {
height: 600px;
justify-content: center;
height: 60vh;
}
/SOBRE/
#sobre {
height: 250px;
height: 30vh;
justify-content: center;
min-height: 250px;
}
/SERVIÇOS/
#servicos {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
#servicos h2 {
text-align: center;
width: 100%;
}
#servicos div {
flex-grow: 1;
flex-basis: 150px;
padding: 0 10px;
}
#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%;
}
/CONTATO/
#contato {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
max-width: 500px;
margin: 0 auto;
}
#contato h2,
#contato p {
width: 100%;
}
}

Exemplo: https://jsfiddle.net/c7gk1baa/

cara e isso mesmo como vc conseguiu me explique ??

mano coloquei a sua linha de código mas não foi

Basicamente consultei o site https://www.w3schools.com sobre flex-direction e outras propriedades relacionadas. Lá é a melhor referência para HTML e CSS.

Recomendo que faça por partes, senão vai se enrolar. Você viu que o exemplo que passei atende como quer que fiquem as imagens. O resto você vai fazendo e testando aos poucos, assim fica mais fácil de você entender o que está fazendo, não copie tudo simplesmente, depois fica inviável achar agulha no palheiro.

Este código que você mencionou estava quase certo, cara:

#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%;
}

O problema é só que você esqueceu de declarar display: flex, no elemento pai. Assim, para trabalharmos com flex-box, sempre temos que colocar essa declaração no elemento pai. Caso contrário, não vai funcionar.

O correto seria isso:

#portfolio {
display: flex; /* Era oquê faltava */
flex-direction: row; /* Isso diz para os filhos se organizarem em row (linha, no português) */
flex-wrap: wrap; /* Aqui, instruímos para a linha de imagens quebrar, quando necessário. */
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%; /* Isso é a largura para cada imagem. Neste caso, o código está pedindo que cada imagem tenha 1/3, em cada linha. Portanto, podemos ter três imagem por linha. */
}

e para que serve o display flex

gente não ta indo kkkk

https://tableless.com.br/flexbox-organizando-seu-layout/

https://www.w3schools.com/css/css3_flexbox.asp

Sugiro seguir outros materiais, não fique preso nesse vídeo.

Boa noite, como está sendo carregado o arquivo normalize.css no seu HTML? Verifiquei também se esse arquivo tem a mesma versão da video aula!

Abraços!