Cards won't be positionned correctly - html

Question

Building a website with the framework Materialize.css and can't figure out how to get the cards to be properly positionned.
card-unpositionned-image
I want the cards to be positionned right under the parallax part (where it says parallax as header with a short paragraph under it) inline (so they are not separated block by block).
Code snippet in index.html
<section style="display:inline;">
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<div class="card__date">
<span class="card__date__day">12</span>
<span class="card__date__month">May</span>
</div>
<div class="card__body">
<div class="card__category">Photos</div>
<h2 class="card__title">Bender Should Not Be Allowed on TV</h2>
<div class="card__subtitle">A Head in the Polls</div>
<p class="card__description">
With a warning label this big, you know they gotta be fun! This is the worst part. The calm before the battle. No! The cat shelter's on to me. Yes, I saw. You were doing well, until everyone died. Daylight and everything.
</p>
</div>
<footer class="card__footer">
<span class="icon icon--time"></span>6 min
<span class="icon icon--comment"></span>39 comments
</footer>
</article>
<article class="card">
<header class="card__thumb">
<a href="#">
<img src="http://lorempicsum.com/futurama/370/235/2">
</a>
</header>
<div class="card__date">
<span class="card__date__day">12</span>
<span class="card__date__month">May</span>
</div>
<div class="card__body">
<div class="card__category">Photos</div>
<h2 class="card__title">Bender Should Not Be Allowed on TV</h2>
<div class="card__subtitle">A Head in the Polls</div>
<p class="card__description">
With a warning label this big, you know they gotta be fun! This is the worst part. The calm before the battle. No! The cat shelter's on to me. Yes, I saw. You were doing well, until everyone died. Daylight and everything.
</p>
</div>
<footer class="card__footer">
<span class="icon icon--time"></span>6 min
<span class="icon icon--comment"></span>39 comments
</footer>
</article>
</section>
Code in assets/css/style.css
* {
box-sizing: border-box; }
body {
font-family: Roboto;
font-size: 16px;
line-height: 1.4;
background-color: #d8e0e5; }
.card {
position: static;
overflow: hidden;
top: 50%;
left: 50%;
width: 370px;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s; }
.card a {
color: inherit;
text-decoration: none; }
.card:hover {
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3); }
.card__date {
position: absolute;
top: 20px;
right: 20px;
width: 45px;
height: 45px;
padding-top: 10px;
color: #FFF;
text-align: center;
line-height: 13px;
font-weight: bold;
background-color: #38c4a5;
border-radius: 50%; }
.card__date__day {
display: block;
font-size: 14px; }
.card__date__month {
display: block;
font-size: 10px;
text-transform: uppercase; }
.card__thumb {
height: 235px;
overflow: hidden;
background-color: #000;
transition: height 0.3s; }
.card__thumb img {
display: block;
opacity: 1;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.card:hover .card__thumb img {
opacity: 0.6;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); }
.card:hover .card__thumb {
height: 90px; }
.card__body {
position: relative;
padding: 20px;
height: 185px;
transition: height 0.3s; }
.card:hover .card__body {
height: 330px; }
.card__category {
position: absolute;
left: 0;
top: -25px;
height: 25px;
padding: 0 15px;
color: #FFF;
font-size: 11px;
line-height: 25px;
text-transform: uppercase;
background-color: #38c4a5; }
.card__title {
margin: 0;
padding: 0 0 10px 0;
font-size: 22px;
color: #000;
font-weight: bold; }
.card:hover .card__title {
-webkit-animation: titleBlur 0.3s;
animation: titleBlur 0.3s; }
.card__subtitle {
margin: 0;
padding: 0 0 10px 0;
font-size: 19px;
color: #38c4a5; }
.card:hover .card__subtitle {
-webkit-animation: subtitleBlur 0.3s;
animation: subtitleBlur 0.3s; }
.card__description {
position: absolute;
left: 20px;
right: 20px;
bottom: 65px;
margin: 0;
padding: 0;
color: #666C74;
font-size: 14px;
line-height: 27px;
opacity: 0;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition-delay: 0s;
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
transform: translateY(25px); }
.card:hover .card__description {
opacity: 1;
transition-delay: 0.1s;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
.card__footer {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
font-size: 11px;
color: #A3A9AB; }
.card__footer .icon--comment {
margin-left: 12px; }
.icon {
display: inline-block;
vertical-align: middle;
margin-right: 2px; }
.icon--comment {
background: url(https://www.grafikart.fr/demo/CSS3/cardui/img/icon-comment.png);
width: 14px;
height: 14px;
margin-top: -2px; }
.icon--time {
background: url(https://www.grafikart.fr/demo/CSS3/cardui/img/icon-time.png);
width: 10px;
height: 17px;
margin-top: -3px; }
#-webkit-keyframes titleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px transparent; } }
#keyframes titleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px transparent; } }
#-webkit-keyframes subtitleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0); } }
#keyframes subtitleBlur {
0% {
opacity: 0.6;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0.6); }
100% {
opacity: 1;
text-shadow: 0px 5px 5px rgba(56, 196, 165, 0); } }
Tried wrapping the cards with a section tag giving him a style of display: inline but didn't change the thing.
Here's a schema of how I would like it to work:
schema-how-it-works