How to add space between two columns in the portal, How to write HTML and CSS code

[subbarayudu]

In the  portal I want to add space between Number and Assessment because those two are overlapping. In the below HTML and CSS part where should I change the code and what is the piece of code I need  to add space between two columns.

HTML Code:

<div ng-if="!data.list.length" class="alert alert-info">
{{data.text.no_result}}
</div>

<div ng-if="data.list.length" class="panel panel-{{::options.color}} b vdp">

<div class="panel-heading vdp wide">
<h4>{{data.text.your_list}}</h4>
</div>

<div class="panel-body vdp" role="grid" aria-readonly="true" style="padding-top: 5px;">

<div class="header" role="row">
<div class="col-sm-1 cell">${Number}</div>
<div class="col-sm-4 cell">{{data.text.column_label}}</div>
<div class="col-sm-3 cell">${Vendor}</div>
<div class="col-sm-1 cell">${Due Date}</div>
<div class="col-sm-1 cell">${State}</div>
<div class="col-sm-2 cell flex-right">${}</div>
</div>

<div ng-repeat="asmt in data.list" class="contact-row" role="row">
<div class="col-sm-1 cell">{{::asmt.number}}</div>
<div class="col-sm-4 cell">{{::asmt.metric_type}}</div>
<div class="col-sm-3 cell">{{::asmt.vendor}}</div>
<div class="col-sm-1 cell">{{::asmt.due_date}}</div>
<div class="col-sm-1 cell">{{::asmt.state}}</div>
<div class="col-sm-2 cell flex-right">
<div ng-if="asmt.state_id=='ready'|| asmt.state_id=='wip'">
<a ng-href="?id=grc_take_survey&instance_id={{asmt.sys_id}}&type_id={{asmt.metric_type_id}}" role="button" class="button-link">
{{data.text.button_label}}
</a>
</div>
</div>
</div>

</div>
</div>

----------------------------------------------------------------------------

CSS Code:

.alert {

    margin-top: 20px;

}

.b {

    margin-top: 15px;

}

.panel-heading {

padding: 10px 0 5px 40px;

}

.panel-body {

    padding: 10px;

}

.label.upper-case {

  text-transform: uppercase; 

}

.cell {

  display: flex;

align-items: center;

border-bottom: 1px solid #dee5e7;

  height: 50px;

  padding: 0;

}

.th .cell {

padding-bottom: 10px;

    align-items: flex-end; 

  height: 60px;

    width : 10px;  

}

.header .cell {

font-weight: 700;

}

.contact-row:hover .cell {

  background-color: $list-group-hover-bg;

}

.cell.flex-right {

  justify-content: flex-end; 

  padding-right: 10px;

}

.first-cell {

  padding-left: 10px;

}

a#new_contact:hover, 

a#new_contact:hover i,

.panel.vdp .contact-row a:hover{

    color: $brand-primary;

}

.contact-row .label.upper-case {

  padding: .3em .6em .2em;

  margin-left: 4px;

}

.contact-row:hover > div {

    background-color: $breadcrumb-bg!important;

}

.label-primary,

.label-warning {

  min-width: 75px;

}

.label-primary {

    color: $label-color;

  background-color: $brand-success

}

.label-warning {

    background-color: $label-warning-bg;

  color: $label-color;

}

[VS]

Hi,

Let me know if this helps:

<div class="col-sm-1 cell">${Number}</div>
<div class="col-sm-1" style="width: 25px;"></div> 

Thanks

VS

[subbarayudu]

Thanks for the quick update,

its not working @VS, those are miss ordering, i think we need to the code in both HTML and CSS 

[VS]

Can you please try this in CSS:

.cell.number-column {
    margin-right: 25px;
}

[subbarayudu]

I have also tried with this but still same