more than h1 inline with grid template areas - html

Question

hi all i am new to html and css i got a simple question:
i wrote this html code
<div class="ourtlimg">
<div class="name1"><h1>Daniel Martin</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
<div class="name2"><h1>Craig Nobel</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
<div class="name3"><h1>Nicole Mark</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
</div>
i made a grid-template-area for the class name1,name2,name3 in 6times 1fr repeat as{port1 port1 port2 port2 port3 port3}to display in one line and when i give each class one of three grid areas it display like the image below.I want to display them in one line with the grid system can you help please.I want them across the page instead of down the pageenter image description here
i added this css for the wrapper:
.wrapper{
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-areas:
'header header header header header header'
'navbar navbar navbar navbar navbar navbar'
'welsec welsec welsec welsec welsec welsec'
'tlinfo tlinfo tlinfo tlinfo tlinfo tlinfo'
'port1 port1 port2 port2 port3 port3'
;
}
and this for the classes in code:
.name1{
grid-area: port1;
float: left;
}
.name2{
grid-area: port2;
float: left;
}
.name3{
grid-area: port3;
float: left;
}

Answer 1

This css code will do all the work =)
.ourtlimg {
display: flex;
justify-content: flex-start;
display: -webkit-flex;
-webkit-justify-content: flex-start;
}
<div class="ourtlimg">
<div class="name1">
<h1>Daniel Martin</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
<div class="name2">
<h1>Craig Nobel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
<div class="name3">
<h1>Nicole Mark</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
</div>
</div>