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;

}

[Stefan Georgiev · Accepted solution]

Hello @subbarayudu ,

try to change this

<div class="col-sm-2 cell">${Number}</div>
<div class="col-sm-3 cell">{{data.text.column_label}}</div>

and 

<div class="col-sm-2 cell">${Number}</div>
<div class="col-sm-3 cell">{{data.text.column_label}}</div>

this is going to make the Number bigger and the Assessment smaller

Hope that this helps you!

If the provided information answers your question, please consider marking it as Helpful and Accepting the Solution so other community users can find it faster.

All the Best,
Stefan