Nav-bar with flexbox and moving elements when hover

1

I have problem with my navigation bar. I wanted to create elements with border-bottom and when i will hover on it I want to increase large of border-bottom, but when I hover on it element is moving himself and another elements too. How can i solve this
problem? Maybe flexbox is not the best option to create navigation and I should take other method?

Here is my codepen: https://codepen.io/cvp/pen/MZdJYX

2

Your padding is causing it to shift. When you only have two values (5px 10px) the first value is the x coordinate. It moves your element up/down. The second value moves them from side to side. So just change that and it shouldn’t move.