Почему возникает проблема с расположением элемента?

Question

Недавно начал изучать CSS и HTML и столкнулся с такой проблемой: элемент nav-links центрируется относительно оставшегося места а не всего navbar

Пока сумел отцентрировать как хотел только при помощи добавления невидимого элемента, но мне кажется, что это неправильно, поэтому надеюсь на более рациональные предложения.

/* Navigation Bar */

.navbar {
  width: 75%;
  height: 3.8rem;
  background-color: hwb(0 15% 85% / 0.473);
  border-radius: 40px;
  margin: auto;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.logo h1 {
  display: flex;
  align-items: center;
  color: aliceblue;
  font-size: 20px;
}

.nav-links {
  display: flex;
  align-self: center;
  gap: 20px;
  margin: auto;
}

.nav-links a {
  color: aliceblue;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
}

<header class="navbar">
  <div class="logo">
    <h1>TorFlicks</h1>
  </div>
  <nav class="nav-links">
    <a href="#">Главная</a>
    <a href="#">История</a>
    <a href="#">⌕</a>
  </nav>
</header>
<main>

Answer 1

Самое простое решение - удалить h1 из потока с помощью position: absolute. Тогда он не будет участвовать в расчете размеров других элементов внутри их общего родителя.

Проблема может появится на узких экранах, когда навигация и заголовок наложатся друг на друга. Однако обычно в таких случаях меню прячут под гамбургер и проблема не возникнет.

Строго говоря некорректно так использовать тег h1. По смыслу TopFlicks - это логотип. Тогда как h1 - это заголовок страницы, влияющий на поисковое продвижение.

/* Navigation Bar */

.navbar {
  width: 75%;
  height: 3.8rem;
  background-color: hwb(0 15% 85% / 0.473);
  border-radius: 40px;
  margin: auto;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  
  position: relative;
}

.logo h1 {
  display: flex;
  align-items: center;
  color: aliceblue;
  font-size: 20px;
  
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
}

.nav-links {
  display: flex;
  align-self: center;
  gap: 20px;
  margin: auto;
}

.nav-links a {
  color: aliceblue;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
  
  display: grid;
  place-content: center;
}

<header class="navbar">
  <div class="logo">
    <h1>TorFlicks</h1>
  </div>
  <nav class="nav-links">
    <a href="#">Главная</a>
    <a href="#">История</a>
    <a href="#">⌕</a>
  </nav>
</header>
<main>

БЛОГ НА HUSL

Почему возникает проблема с расположением элемента?

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