Problem with CSS formating

I was following a code tutorial when i realised my code is different from how it should look and i can’t find what is wrong. If someone could say what i did wrong, i would be pleased.
It should look like the photo

, but you can see the results are pretty different
You can change the original “mateuso.png” if you want, i’m new here and i can’t post more than one picture.

<!DOCTYPE html>
<html>
<head>
    <title> Projeto 01 </title> 
    <link rel="stylesheet" href="estilo/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
    <link href="estilo/style.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" contet="palavras-chave,do,meu,site">
    <meta name="description" content="Descrição do meu site">
    <meta charset="utf-8">
    

<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=sgRldSpN2G1YbzGXj-a1kuAM4VqmLmEcnTlBpyHiXNMRfgi7HL2vW5Bno7KTFSy2-8OCmV0PCbOqaDknv4Ckh2jfj4CuOzQ4vapE_7GpzGa9BVG9Gpit3vtyrM6EmFpbbL45gninz4vwf4Tl0ajkIQ" charset="UTF-8"></script></head>
<body>
    <header>
        <div class="center">
        <div class="logo left">Logomarca</div><!--logo-->
        <nav class="desktop right">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Sobre</a></li>
                <li><a href="">Serviços</a></li>
                <li><a href="">Contato</a></li>
            </ul>
        </nav>
        <nav class="mobile right">
            <div class="botão-menu-mobile">
            <i class="fa fa-bars" aria-hidden="true"></i>
                
        </div>

            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Sobre</a></li>
                <li><a href="">Serviços</a></li>
                <li><a href="">Contato</a></li>
            </ul>
        </nav>
    <div class="clear">   </div> 
    </div><!--center-->
    </header>
    
    <section class="banner-principal">
        <div class="overlay"></div><!--overlay-->
        <div class="w50 left"> 
        <form>
            <h2>Qual o seu melhor email?</h2>
            <input type="email" name="email" required />
            <input type="submit" name="acao" value="Cadastrar!">
            </div>


        </form>
    </section><!--banner-principal-->

    <section class="descricao-autor">
        <div class="center">
        <div class="w50 left"> 
        <h2>Guilherme C. Grillo</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
            Curabitur iaculis rutrum dolor non lobortis.
        </p>
        p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
            Curabitur iaculis rutrum dolor non lobortis.
        </p>
    </div><!--w50-->
    <div class="w50 right">
        <!--pegar imagem depois-->

        <img class=right src="images/mateuso.png" />
    </div><!--w50-->
    <div class="clear"> </div>
    </div>
    </section>


    <section class="especialidade">
        
        <div class="center">
            <h2 class="especialidades"> </h2>
            <div class="box-especialidade">
                
            
         </div><!--box-especialidade-->
         <div class="center">
            <div class="w33 left box-especialidade">
                
                <i class="fa fa-html5" aria-hidden="true"></i>
                <h4>HTML5</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
            Curabitur iaculis rutrum dolor non lobortis.
            </p>
         </div><!--box-especialidade-->
         <div class="clear"></div>
         <div class="center">
            <div class="w33 left box-especialidade">
                <i class="fa fa-css3" aria-hidden="true"></i>
                <h4>CSS3</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
            Curabitur iaculis rutrum dolor non lobortis.
            </p>
         </div><!--box-especialidade-->
         <div class="center">
            <div class="w33 left box-especialidade">
                <i class="fa fa-gg" aria-hidden="true"></i>

                <h4>Javascript</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
            Curabitur iaculis rutrum dolor non lobortis.
        </p>
         </div><!--box-especialidade-->



        </div><!--center-->
       </section><!--especialidades-->

       <section class="extras">

           
               <div class="w50 left"> 
                <div class="depoimento single"> 
                    <h2>Depoimentos</h2>  
                    <p class="depoimento-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                        Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                        Curabitur iaculis rutrum dolor non lobortis</p>
          
                    <p class="nome-autor">Lorem Ipsum</p>                 
                    <p class="depoimento-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                        Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                        Curabitur iaculis rutrum dolor non lobortis</p>
                        <p class="nome-autor">Lorem Ipsum</p>
            
            
                    
                    <p class="depoimento-descricao">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                        Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                        Curabitur iaculis rutrum dolor non lobortis</p>  
                        <p class="nome-autor">Lorem Ipsum</p>
                </div><!--left-->
                

             <div class="w50 right">            
             <h2 class="title">Serviços</h2>   
             <div class="servicos"> 
             <ul>
                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                    Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                    Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                    Curabitur iaculis rutrum dolor non lobortis</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                        Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                        Curabitur iaculis rutrum dolor non lobortis</li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                            Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius. 
                            Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non sed urna. 
                            Curabitur iaculis rutrum dolor non lobortis</li>
             </ul>        
            </div>
            
           </div><!--center--><!--w50-->

           <div class="clear"></div>
       </section><!--extras-->
       


      
</body>
</html>



    *{
        margin: 0;
        padding:0;
        box-sizing: border-box;
        font-family: "Open Sans";


    }


/**Boot CSS**/

.center{
    max-width: 1280px;
    padding:0 2%;
    
}

.w33{
    width: 33.3%;
    padding: 0 10px;
}

.w50{
    padding:0 10px;
    width: 50%;
}

.left {
    float: left;
}

.right{
    float: right;
}

.clear{
    clear: both; 
}

/**Estilização do site **/

header{
    background: #3D437A;
    padding:20px 0;
 }

 header.logo{
     font-weight: 300;
     font-size: 23px;
     text-transform: uppercase;
     color: white;
 }

 .mobile{
     display: none;
 }


 nav.desktop ul{
    
   list-style-type: none;
   
  }

  nav.desktop li{
      font-size: 15px;
      padding:0 30px;
      text-transform: uppercase;
    display: inline-block;
    font-weight: 300;

  }

  nav.desktop a{
      color: white;
      text-decoration: none;
  }

section.banner-principal{

    width: 93%;
    height: 600px;
    background-image: url('../images/background.jpg');
    background-size: cover;
    position: relative;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgba(51,51,51,0.7);
}

section.banner-principal form{
    z-index: 2;
    position: aboslute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);

}

section.banner-principal form h2{
    color: white;
    font-weight: 300;
    font-size: 30px;
    text-align: center;

}

section.banner-principal form input[type=email]{
    width: 100%;
    height: 66px;
    background: white;
    margin-top:10px;
    color: #333;
    font-size: 22px;
    padding-left: 10px;
}


section.banner-principal form input[type=submit]{
    width: 100%;
    height: 66px;
    background: white;
    margin-top:10px;
    color:#00C59E;
    cursor: pointer;
    font-size: 22px;
    padding-left: 10px;
    border: 0px;
}

section.descricao-autor{
    padding:30px 0;
}

section.descricao-autor h2{
    font-size: 28px;
    font-weight: 400px;
    color: #444
}

section.descricao-autor p{
    font-size: 16px;
    color: #444;
    margin-top:10px;

}

section.especialidades h2.title {
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    color: #999;
}


section.especialidades{
    padding: 40px 0;
    background: #3D437A
}

.box-especialidade{
        margin: 40px 0;
        padding: 0 30px;
        text-align: center;
}
.box-especialidade-h3{
    text-align:center;
    font-size: 400px;
    color: #404580;

}

.box-especialidade h4{
    font-weight: 300;
    color: #bababa;
    text-align: center
}

.box-especialidade p{
    color: #444;
    font-size: 15px;
    margin-top: 10px;
}

section.extras{
    padding: 0 50px;
    background-color: #404580;
}
servicos-container,.depoimentos-container{
    padding: 50p 0x;

}

section.extras .title{
    color: white;
    font-weight: 300;
    font-size: 25px;
    margin-bottom: 15px;
}

.depoimentos-single{
    padding: 15 0px;

}

div.servicos ul{
    margin:20 0px;
    
    
}

.servicos li{
    margin-bottom: 15px;
    font-size: 15px;
    color: white;
    font-weight: 300;
}

 

div.servicos ul{
    margin:20 0px;
    
}

footer {
    background: #313462;
    padding: 30px 0;
}
footer p {
    color:white;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
}
@media screen and (max-width: 700px){
    nav.desktop {
        display: none;

    }

    .botao-menu-mobile{
        font-size: 24px;
        cursor: pointer;
        color: white;
    }
    nav.mobile{
        display: block;
    }
    nav.mobile ul{
        top:75px;
        z-index: 3;
        width: 100%px;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
    }
    nav.mobile li{
        width: 100%px;
        font-size: 17px;
        background: white;
        display: block;
        border-bottom: 1px solid #ccc;
        padding: 8px 0;
        font-weight: 300;


    }
    nav.mobile a{ 

        display: block;
        background: white;
        text-decoration: none;
    }
    nav.mobile li a{
        color: #444;
        text-decoration: none;
    }
}
p.depoimento-descricao{
    font-size: 15px;
    color: white;
    font-weight: 300px;

}

p.nome-autor{
    font-size: 15px;
    color: white;
    margin-top:5px;
    font-weight: bold;
} 




@media screen and (max-width: 768px){
    img{
        float: none !important;
        display: block;
        margin:0 auto;
        max-width: 500px;
    }

    .w50{ 
        padding:20px;
        width: 100px;
    }

    .w33{
        width: 100%;
        padding: 20px;
    }

} *emphasized text*