Текст смещен в первой ячейке списка

Question

Пытаюсь разобраться в вёрстке. Не могу понять почему в первой ячейке таблицы текст всегда смещён относительно другого текста.

Вот пример: poltok.ru

Текст в первой ячейке всегда смещён выше остальных. Хотя код ячеек у всех одинаковый. Правила CSS действуют одни на все ячейки. При этом всё равно текст первой ячейки всегда смещён. Какие только параметры CSS я не менял, но не смог добиться ответа...

.dws-menu>ul {
  display: flex;
  list-style: none;
  justify-content: center;
}

.dws-menu * {
  margin: 0;
  padding: 0;
}

header {
  margin: 100px;
  font-family: Cuprum;
  Arial;
  Helvetical;
}

.dws-menu>ul li {
  position: relative;
  background: #ececed;
  border: 1px solid #c7c8ca;
}

.dws-menu>ul li a {
  padding: 5px 10px 8px 40px;
  /*40px 30px 15px 40px;*/
  display: block;
  font-size: 12px;
  color: #454547;
  text-decoration: none;
  text-transform: uppercase;
}

.dws-menu>ul li>a i.fas {
  position: absolute;
  top: 10px;
  left: 8px;
  font-size: 20px;
}

<header>
  <nav class="dws-menu">
    <ul>
      <li><a href="/"><i class="fas fa-home"       ></i>Главная</li>
            <li><a href="/"><i class="fas fa-home"       ></i>Главная</li>
            <li><a href="/"><i class="fas fa-door-open"  ></i>Межкомнатные двери</li>
            <li><a href="/"><i class="fas fa-door-closed"></i>Входные Двери</li>
            <li><a href="/"><i class="fas fa-paperclip"  ></i>Фурнитура</li>
            <li><a href="/"><i class="fas fa-diagnoses   "></i>Услуги</li>
            <li><a href="/"><i class="fas fa-highlighter"></i>Плинтусы</li>
            <li><a href="/"><i class="fas fa-info-circle"></i>О компании</li>
            <li><a href="/"><i class="fas fa-percentage"></i>Акции</li>
            <li><a href="/"><i class="fas fa-atlas"></i>Контакты</li>
        </ul>
    </nav>
</header>

Пункты меню просто скопировал с первого попавшегося сайта для тренировки

Answer 1

Пункты меню просто скопировал с первого попавшегося сайта

Если копировать, то нужно делать это аккуратно и внимательно. Также необходимо знать основы HTML - например, что тег <a> - парный и должен всегда закрываться.

Запустите пример ниже и Вам станет понятно, насколько это важно.

.dws-menu>ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.dws-menu * {
  margin: 0;
  padding: 0;
}

header {
  margin: 10px;
  font-family: Cuprum, Arial, Helvetical;
}

.dws-menu>ul li {
  position: relative;
  background: #ececed;
  border: 1px solid #c7c8ca;
}

.dws-menu>ul li a {
  padding: 5px 10px 8px 40px;
  /*40px 30px 15px 40px;*/
  display: block;
  font-size: 12px;
  color: #454547;
  text-decoration: none;
  text-transform: uppercase;
}

.dws-menu>ul li>a i.fas {
  position: absolute;
  top: 10px;
  left: 8px;
  font-size: 20px;
}

/* Выделение ссылок. Только для примера. */
a { box-shadow: 0 0 1px 2px #00f; }
a:empty { box-shadow: 0 0 1px 2px #f00; }

<link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@500&amp;display=swap" rel="stylesheet">
<header>
  Корректная разметка (все теги закрыты)
  <nav class="dws-menu">
    <ul>
      <li><a href="#01"><i class="fas fa-home"       ></i>Главная</a></li>
      <li><a href="#02"><i class="fas fa-door-open"  ></i>Межкомнатные двери</a></li>
      <li><a href="#03"><i class="fas fa-door-closed"></i>Входные Двери</a></li>
      <li><a href="#04"><i class="fas fa-diagnoses"  ></i>Услуги</a></li>
      <li><a href="#05"><i class="fas fa-info-circle"></i>О компании</a></li>
      <li><a href="#06"><i class="fas fa-percentage" ></i>Акции</a></li>
    </ul>
  </nav>
</header>
<header>
  Оригинальная разметка (не закрыты теги ссылок)
  <nav class="dws-menu">
    <ul>
      <li><a href="#07"><i class="fas fa-home"       ></i>Главная</li>
      <li><a href="#08"><i class="fas fa-door-open"  ></i>Межкомнатные двери</li>
      <li><a href="#09"><i class="fas fa-door-closed"></i>Входные Двери</li>
      <li><a href="#10"><i class="fas fa-diagnoses"  ></i>Услуги</li>
      <li><a href="#11"><i class="fas fa-info-circle"></i>О компании</li>
      <li><a href="#12"><i class="fas fa-percentage" ></i>Акции</li>
    </ul>
  </nav>
</header>
<header>
   Разметка корректная, но предыдущий блок продолжает ломать вёрстку
  <nav class="dws-menu">
    <ul>
      <li><a href="#13"><i class="fas fa-home"       ></i>Главная</a></li>
      <li><a href="#14"><i class="fas fa-door-open"  ></i>Межкомнатные двери</a></li>
      <li><a href="#15"><i class="fas fa-door-closed"></i>Входные Двери</a></li>
      <li><a href="#16"><i class="fas fa-diagnoses"  ></i>Услуги</a></li>
      <li><a href="#17"><i class="fas fa-info-circle"></i>О компании</a></li>
      <li><a href="#18"><i class="fas fa-percentage" ></i>Акции</a></li>
    </ul>
  </nav>
</header>

Заметьте, что ссылки с красной обводкой отсутствуют в разметке, но браузер создаёт их, пытаясь самостоятельно закрыть теги.

БЛОГ НА HUSL

Текст смещен в первой ячейке списка

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