Ui-grid column gets expand on hover - css

Question

I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.
Here is my file.
HTML File
<div class="full-panle-body">
<div class="row user-view-grid" ng-show="gridOptions.data.length > 0 && userLoaded">
<div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
<div class="row loading-spinner" ng-hide="userLoaded">
<div class="col-xs-3"></div>
<div class="loading col-xs-6">
<span rel='spinner' class='data-spinner'></span>
<div class="loading-text">{{::'label.loading.user.list' | translate}}</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class="no-records" ng-show="!numberRecordsFound && userLoaded">
{{:: 'text.search.no.records' | translate }}
</div>
</div>
<!-- html template for status -->
<script type="text/ng-template" id="statusCell-template.html">
<div ng-click="grid.appScope.onUserDetails(row.entity)" class="inner-data-cell-center">
<div style="text-align:center;">
<i class="fa fa-envelope-o" aria-hidden="true" style="color:grey;" ng-show="'added' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-envelope-o" aria-hidden="true" style="color:blue;" ng-show="'notified' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-check" aria-hidden="true" style="color:green;" ng-show="'complete' == row.entity.registrationStatus.toLowerCase()"></i>
</div>
<div style="text-align:center;" class="smaller-grey">{{row.entity.registrationStatus}}</div>
</div>
</script>
<script type="text/ng-template" id="name-template.html">
<div class="ui-grid-cell-contents" ng-click="grid.appScope.onUserDetails(row.entity)">
<div class="name-style">{{row.entity.lastName}}, {{row.entity.firstName}}</div>
<div class="email-style">{{row.entity.email}}</div>
</div>
</script>
<!-- html template for organization -->
<script type="text/ng-template" id="organization-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span class="dummy">{{row.entity.organization}}</span>
</div>
</script>
<!-- html template for username -->
<script type="text/ng-template" id="username-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span>{{row.entity.userName}}</span>
</div>
</script>
<!-- html template for Account Status -->
<script type="text/ng-template" id="accountstatus-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span ng-show="row.entity.isActive">Enabled</span>
<span ng-show="!row.entity.isActive">Disabled</span>
</div>
</script>
CSS File
.ui-grid-row:hover{
border-left: solid 6px #hoverBlue;
}
JS File
$scope.gridOptions = {
rowHeight: 60,
multiSelect: false,
enableColumnMenus: false,
enableEdit: false,
enableSoring: true,
columnDefs: [
{
name: 'registrationStatus',
width: "15%",
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: 'statusCell-template.html'
},
{
name: 'lastName',
width: "30%",
displayName: 'Name',
headerCellClass: 'grid-header-left',
cellTemplate: 'name-template.html'
},
{
name: 'organization',
width: "15%",
displayName: 'Organization',
headerCellClass: 'grid-header-left',
cellTemplate: 'organization-template.html'
},
{
name: 'userName',
width: "20%",
displayName: 'Username',
headerCellClass: 'grid-header-left',
cellTemplate: 'username-template.html'
},
{
name: 'isActive',
width: "20%",
displayName: 'Account Status',
headerCellClass: 'grid-header-left',
cellTemplate: 'accountstatus-template.html'
}
]
};
Hi.I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.