How can I prevent other text from shifting on hover with CSS?

I have a category selector in my React app, and the category labels are displayed with flexbox so that they can be spaced evenly and horizontally. I’ve applied some styling changes to the hovered text to make the font weight heavier, but doing so has caused the labels surrounding the hovered one to shift. Is there a way I can fix this so that hovering doesnt cause anything to move, but instead just change the font weight?

Here’s my CSS:

.skills-category-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.category-label {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}

.category-label:hover {
    font-weight: 800;
    text-decoration: underline;
}