CSS Grid Layout problem

This shows an issue with a grid layout which count-of-items-per-row is NOT fixed.

by julian_weinert

HTML

<div id="main">
    <div id="welcometext">
        <p>aximinctus incte pa idis sequati velit exero to tem si disci- enderi doloressit odi reptatum dolorrum et et autet aliti- assi rerio corum hitius am quidelibus. 318 px giatemporro esequam, eicias arum doleni vidis pre pa do- lupti orerum qui doluptatiam, voluptae conseritaque sita [...] imuscimin ne niendit.</p>
    </div>
    <div class="navelement">
    </div>
    <div class="navelement">
    </div>
    <div class="navelement">
    </div>
</div>

CSS

#main {
    width:1000px;
    height:1000px;
    position:relative;
    background-color:rgb(88, 88, 88);
}
#main > * {
    float:left;
}
#welcometext {
    width:318px;
    margin-right:23px;
}
#welcometext p {
    width:100%;
    margin-top:30px;
}
.navelement {
    width:318px;
    height:189px;
    overflow:hidden;
    margin-top:40px;
    border-radius:10px;
    background-color:white;
}

/* the different options I tried per declaration */
.navelement + .navelement {
    margin-left:23px; /* --> this must not be true for the first element, second line */
}
.navelement {
    margin-right:23px; /* --> this makes the most right element break to the next line */
}