When I have a full width, fluid container my text in google chrome becomes distorted (too big), but none of the other browsers. Why?

Question

.container-fluid{
    background-color: $white;
    padding: 0;

    &.featured{
        max-width: 1300px;
    }
}

So, I set this to container fluid, and set max width on the main content (.featured), I have a top nav which remains full page width. If i zoom out a lot in chrome, the text becomes distorted. I can't see any font changes I'm making on media queries to cause this, and it's working fine in safari and firefox.

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

chrome:

same zoom, but with firefox:

Answer 1

If I got your question right, you need to end to your featured definition:

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

Make sure the featured element can scale horizontally, i.e. does not have max height.

If this was not the problem, please post a codepen/fiddle