Почему текст не растягивается на всю длину?

Question

[DZHAMBUALT]

Здрасте. Внизу есть картинки и код. Проблема заключается в том что текст не растягивается на всю длину, уже час сижу не могу понять в чём дело можете объяснить в чём проблема.

Вот как должен выглядеть текст:


Вот как получается:


HTML:

<div class="container">
      <!-- NAV BAR -->
      <ul class="navigation-block__bar">
        <!-- ITEM -->
        <li class="navigation-bar__item --list --active">
          <a href="#" class="component-te-1">SERVICES</a>
          <!-- ARROW IMG -->
          <div class="--list-arrow">
            <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" />
          </div>
          <!-- LIST -->
          <ul class="navigation--list-group">
            <div class="navigation--list-group__container">
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1"
                  >MOBILE APPLICATION DEVELOPMENT</a
                >
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1"
                  >GAME DEVELOPMENT OUTSOURCING</a
                >
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">VR APP DEVELOPMENT</a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">DEDICATED DEVELOPERS </a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">SDK DEVELOPMENT </a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">3D MODELING SERVICES </a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">AR APP DEVELOPMENT</a>
              </li>
            </div>
          </ul>
        </li>
        <!-- ITEM -->
        <li class="navigation-bar__item --list --active">
          <a href="#" class="component-te-1">TECHNOLOGIES</a>
          <!-- ARROW IMG -->
          <div class="--list-arrow">
            <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" />
          </div>
          <!-- LIST -->
          <ul class="navigation--list-group">
            <div class="navigation--list-group__container">
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">IOS</a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">ANDROID</a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">UNITY</a>
              </li>
            </div>
          </ul>
        </li>
        <!-- ITEM -->
        <li class="navigation-bar__item">
          <a href="#" class="component-te-1">PRODUCTS</a>
        </li>
        <!-- ITEM -->
        <li class="navigation-bar__item">
          <a href="#" class="component-te-1">PORTFOLIO</a>
        </li>
        <!-- ITEM -->
        <li class="navigation-bar__item">
          <a href="#" class="component-te-1">BLOG</a>
        </li>
        <!-- ITEM -->
        <li class="navigation-bar__item --list --active">
          <a href="#" class="component-te-1">ABOUT US</a>
          <!-- ARROW IMG -->
          <div class="--list-arrow">
            <img src="IMG/ASSETS/NAVIGATION/nav-arrow.svg" alt="arrow" />
          </div>
          <!-- LIST -->
          <ul class="navigation--list-group">
            <div class="navigation--list-group__container">
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">CONTACTS</a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">TEAM</a>
              </li>
              <li class="navigation--list-group-item">
                <a href="#" class="component-te-1">JOIN THE TEAM</a>
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>

CSS:

.navigation-block {
  width: 100%;
  background-color: rgba(33, 33, 33, 0.3);
  backdrop-filter: drop-shadow(0px 4px 12px rgba(24, 9, 96, 0.1));

  padding: 19px 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* LOGO */
.navigation-block__logo {
}
.navigation-block__logo img {
  width: 205px;
}
/* NAV BAR */
.navigation-block__bar {
  display: flex;
  column-gap: 20px;
}
.navigation-bar__item {
  position: relative;
  display: flex;
  align-items: center;
}
.navigation-bar__item::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 3px;
  border-radius: 50px;
  background-color: white;
  bottom: -10px;

  transition: all linear 0.15s;
}
.navigation-bar__item:hover::before {
  width: 100%;
}
.navigation-bar__item.--active::before {
  opacity: 0;
}

.navigation-bar__item a {
}
.--list {
}
.--list-arrow {
}
/* --LIST */
.navigation--list-group {
  background-color: rgba(33, 33, 33, 0.3);
  top: 30px;
  position: absolute;
}
.navigation--list-group::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--blue);
  top: -3px;
}
.navigation--list-group__container {
  display: flex;
  row-gap: 10px;
  flex-flow: column wrap;

  margin: 15px 0 0 12px;
  padding: 0 10px 10px 0;
}
.navigation--list-group-item a {
  display: flex;
  width: 100%;
}

/* BTN */
.navigation-block__btn {
  width: 160px;
}
/* DEFAULT SETTINGS */
* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  border: none;
  text-decoration: none;
  list-style: none;
  color: black;

  /* -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; */
  z-index: 1;
}
input {
  background-color: transparent;
}
button {
  display: block;
}
body {
  position: relative;
}

Comments

[Владислав Лысков]

потому что вот этот вот блок.navigation-bar__item у тебя относительный, а вложенный в него li абсолютный по относительно его, соотвественно иммет максимальную ширину своего родителя
поэтому , если ты уберёшь.navigation-bar__item position: relative, ты получишь нужное тебе новедение

Answer 1

[Сергей delphinpro]

самое простое

.navigation--list-group-item {
  white-space: nowrap;
}

Comments

[DZHAMBUALT]

Вау. Спасибо вам за быструю помощь!

[Froggyweb]

DZHAMBULAT-SAMOUCHKA, размести в последний пункт ссылку на ссылку с длинным текстом