I am currently utilizing bootstrap to design a webpage. I have divided the body into two segments: content and header. Within the content block, there is a div with the class .container .sameTable, inside of which resides another div with the classes .row .sameRow, each further divided into two blocks - left and right. The left block has the class .col-xs-2, while the right block has the class .col-xs-10, both also possessing the class .sameCol.
On Opera, FF, and IE browsers, everything appears as intended. However, on Google Chrome across various screen sizes, I noticed that the width of the contents block seems slightly narrower compared to other blocks by approximately 1px. After some research, it was suggested that this could be due to percentage-based width definitions, but unfortunately I cannot modify the predefined bootstrap classes. How can I resolve this issue? image -
Furthermore, when I remove float:none from the left and right blocks, the problem disappears, but then my left block shrinks more than necessary.
image -
.sameTable, .sameRow, .sameCol are custom classes that have the following styling:
.sameTable {
display: table;
padding: 0;
}
.sameRow {
display: table-row;
}
.sameCol {
float: none;
display: table-cell;
vertical-align: top;
}