change of font-weight to bold is unwantingly changing width of element [duplicate]

Answer 1

Interesting that no-one mentions letter-spacing.

It is possible to add letter spacing to the normal font and remove it for the bold version.

Getting it right is not always possible and depends a lot on the font and the font-size. But with more browsers starting to accept subpixel values for letter-spacing it starts to be more practical.

Example:

.nav-link.active {
    font-weight: bold;

    /* Adjust for font-weight bold so that the text will still align */
    letter-spacing: -1px;
}