Одна часть текста двигается, а другая не реагирует

Question

Почему header__inner подвинула ссылки nav__link вправо, а header__logo не двигает слово ARCANE при вводе тех же команд в css?

/* HEADER*/

.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}


/* HEADER__LOGO*/

.header__logo {
  font-size: 20px;
  font-weight: 700;
  color: royalblue;
  display: flex;
  justify-content: space-between;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header class="header">
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">ARCANE</div>

      <nav class="nav">
        <a class="nav__link" href="#">CONTACT</a>
        <a class="nav__link" href="#">SERACH</a>
        <a class="nav__link" href="#">ABOUT</a>
      </nav>

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

Answer 1

.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header__logo {
  font-size: 20px;
  font-weight: 700;
  color: royalblue;
  display: flex;
  justify-content: space-between;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header class="header">
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">ARCANE</div>

      <nav class="nav">
        <a class="nav__link" href="#">CONTACT</a>
        <a class="nav__link" href="#">SERACH</a>
        <a class="nav__link" href="#">ABOUT</a>
      </nav>
    </div>
  </div>
</header>

nav__link находяться с правой стороны - поскольку вы задали .header__inner своства флекс элемента display: flex;justify-content: space-between; по сути вправо прижимается их родитель - .nav /// У класса .header__logo не задана фиксируемая ширина и это блочный элемент, по этому он будет занимать все свободное простраство

БЛОГ НА HUSL

Одна часть текста двигается, а другая не реагирует

Ответы (1 шт):