fix(grids): refactor cell width

[ddaribo]

Closes #13452

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[RivaIvanova]

If I have an IgxGrid with the following configuration:

<igx-grid #grid [height]="'500px'" [width]="'1000px'" [data]="data">
    <igx-column field="ID" [width]="'10%'"></igx-column>
    <igx-column field="CompanyName" [width]="'25%'"></igx-column>
    <igx-column field="ContactName" [width]="'20%'"></igx-column>
    <igx-column field="ContactTitle" [width]="'25%'"></igx-column>
    <igx-column field="Country" [width]="'10%'"></igx-column>
    <igx-column field="Region" [width]="'10%'"></igx-column>
</igx-grid>

and enough data records in order for the vertical scrollbar to be displayed, the cell is misaligned.

The cell has width equal to 98px, however, the header is 98.3px.

This is reproducible when the width is set in percentage, when set in px or auto there is no misalignment.