Wish that link did not move when hovered?

When you hover on the links is slightly moved as to do so they would stay in their place?

Code:
CSS :
.nav_link {
 text-decoration: none;
 margin-left: 50px;
 color: black; 
}

.nav_link:hover {
 font-weight: bold;
}


5e49aa9303f76236301044.jpeg
5e49aa98eee7c301643420.jpeg
April 7th 20 at 15:22
3 answers
April 7th 20 at 15:24
Solution
For bold, you increase the width of the text, and accordingly he jumps a little. Hence it is necessary to replace it and choose another way to Express guidance
The case is in fact changing the width of the text due to font-weight: bold;
If we are talking about how to escape from a problem, you can really use any other method of highlighting links, but talking specifically about solving the problem, you need to slightly change the layout. Apparently all the links are in the units that the width adjust to the text width. One solution is to set a fixed width to the blocks (with the maximum width when text is bold), then change the width of text does not affect the unit. - pear commented on April 7th 20 at 15:27
April 7th 20 at 15:26
Replace font-weight: bold; color on something
April 7th 20 at 15:28
So?
https://jsfiddle.net/9vfpwm7r/4/
margin-right u li can be removed, and the text(links) will not be displaced even if it nalaziti each other.

Find more questions by tags CSSHTML