Developing a web application using Angular Material has been my ongoing project. I have created an md-list with 7 columns to display different values. My goal is to add a header to each column to identify its corresponding value. While I have the headers ready, I am struggling to format them correctly. I came across a solution on Stack Overflow, which suggests using   or in HTML to insert spaces.
I'm hesitant about using so many spaces for formatting. Do you have any suggestions for organizing the row headers above their respective columns more efficiently?
Thank you in anticipation of your advice.
Here's what I've attempted:
<div layout="column">
<md-content class="md-padding" layout-padding>
<div class="md-list-column-headers" layout="row" flex="100">
<h4><strong> User: </strong></h4>
<h4><strong> Title: </strong></h4>
<h4><strong> Description: </strong></h4>
<h4><strong> Rating: </strong></h4>
<h4><strong> Course: </strong></h4>
<h4><strong> Date: </strong></h4>
</div>
<md-list flex >
<md-list-item class="md-2-line" ng-href="{{item.url}}" target="_blank" ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<div class="md-list-item-text" layout="column" flex="5">
<h4>{{$index + 1}}</h4>
</div>
<div class="md-list-item-text" layout="column" flex="10">
<span></span>
<h4>name</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="20">
<h4>{{item.title}}</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="10">
<h4>{{item.description}}</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="10">
<h4>{{item.description}}</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="5">
<h4>{{item.score}}</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="10">
<h4>{{item.course}}</h4>
<md-divider></md-divider>
</div>
<div class="md-list-item-text" layout="column" flex="15">
<h4>{{item.timestamp}}</h4>
<md-divider></md-divider>
</div>
</md-list-item>
</md-list>
</md-content>
</div>