When I have full width, the liquid container my google chrome text gets distorted (too large), but none of the other browsers. What for?

Question

.container-fluid{ background-color: $white; padding: 0; &.featured{ max-width: 1300px; } } 

So, I installed this in the container liquid and set the maximum width of the main content (.featured), I have a top nav that remains the full width of the page. If I zoom out in chrome, the text will be distorted. I do not see any font changes that I make in media queries to trigger this, and it works fine in safari and firefox.

Any ideas on how to resolve this or what should I dig more?

chrome:

same scaling, but using firefox:

Answer 1

If I understand your question correctly, you need to finish your definition:

 .featured { overflow-wrap: break-word; } 

Make sure that the feature of the element can scale horizontally, i.e. does not have a maximum height.

If this is not a problem, send the code / fiddle