Przy użyciu diplay flex divy nie ustawiają się we własciwy sposób

Question

Chodzi o ułożenie obok siebie, w jednej lini divów, które znajdują się w sekcji main.

Wszystkie te divy mają klasę "zaleta". W każdym z nich znajduje się h2 z tekstem "W 100% naturalna".

Obecnie układają się pod sobą. 

Dodam, że kiedy usunąłem część kodu html i css, zostawiając tylko te fragmenty, które dotyczą problematycznej sekcji main, divy układały się prawidłowo obok siebie. 

Czy ktoś wie co powoduje ten problem?

https://codepen.io/grzegorz-kondracki/pen/VNzxXW

Answer 1

.promise button:hover {
     box-shadow: 0px 5px 20px #283392;
    }
}

Usuń ostatnią klamerkę 

Comments

Dziękuję!

Answer 2

Ten efekt można uzyskać przez float=left, zobacz na ten przykład

html:

<div id="wrap">	    
    <div id="logo">
	  <img src="img/film_projector.gif" alt="projektor" width="100" height="100"> 
    </div>
    <div id="title">
	  Witaj na naszej stronie opisującej wybitne filmy XX wieku. 			
    </div>
</div>

css:

#wrap{width:100vw; height:100px;}
#logo{ height: 100px; background:white; width:20%;float: left;}
#title{ background:green; float: left; height:100px;  word-wrap: break-word;
         overflow-wrap: break-word; width:60%}