Как сделать так, что бы не двигался элемент?

Question

[Olga17527]

Добрый день, у меня есть шапка, в которой есть лого(левый угол) и "войти" "зарегистрироваться"(правый угол). Я хотела бы, что бы при наведении на "зарегистрироваться" он становился weight:600, но почему то в этот момент "войти" смещается влево. Буду благодарна если найдете ошибку. Спасибо.

<header class="header" id="header">
    <div class="container">
      <div class="header__inner">

        <div class="logo">
            <a href=""class="logo__href">
              <img class="logo__img"src="img\logo.png" alt="">
            </a>
        </div>

        <nav class="nav">
          <a href="#" class="enter">войти</a>
          <a href="#" class="reg">Зарегистрироваться</a>
        </nav>

      </div>
    </div>
  </header>

/* Header
  ==========================*/
  .header {
    background-color: #fff;
    padding: 21px 0;
  }
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo{
    padding-right: 20px;
  }

  .logo__img {
    height: 70px;}

    .nav {
      display: flex;
      align-items: center;

    }

    .enter {
      padding: 6px 18px;
      margin-right: 21px;
      margin-left: 57px;
      background: #DA1111;
      box-shadow: -2px 4px 4px #FFD0D0;
      border-radius: 10px;
      text-decoration: none;

      font-style: normal;
      font-weight: 600;
      font-size: 15px;
      text-transform: uppercase;
      color: #fff;


    }
    .enter:hover {
      background-color: #fff;
      border: 1px solid #DA1111;
      color: #DA1111;
      transition: 0,2s linear;
      box-shadow: none;
    }

    .reg {

      font-size: 15px;
      text-transform: uppercase;
      text-decoration: none;

      color: #DA1111;

    }
    .reg:hover {   
      font-weight: bold;
      box-shadow: none;
    }

Comments

[ambisinister One]

На выделении жирный шрифт уберите
bold внизу уберите

[Olga17527]

Но мне же нужно, что бы при наведении он становился bold.

[ambisinister One]

Olga17527, так сделайте наоборот.
Разница ширины шрифта раздвигает планку

[Olga17527]

А может быть есть какой нибудь другой вариант? Например каким-то образом "заблокировать" кнопку "войти"

[ambisinister One]

Olga17527, Другой вариант - задать отступы.
Где жирный шрифт - там пиксел меньше на расширение.
По идее должно работать.
)))

[Александр Васильев]

Либо убирайте болд и добивайтесь «болд»- эффекта через тени.
Либо кнопка должна быть флекс с центрированием и фиксированной ширины

Answer 1

[Ankhena]

но почему то в этот момент "войти" смещается

Логично, потому что жирный текст занимает больше места.

Поправить так:


Альтернатива: заменить абсолют на гриды, но нужно обернуть текст в span.