Моя панель навигации не заполняет 100% ширины экрана правильно. Элементы на панели навигации выравниваются по горизонтали

Question

Я новичок в кодировании HTML и CSS и работаю над созданием веб-сайта практики. Я столкнулся с этой проблемой с моей панелью навигации:

Когда я изменяю ширину на 100%, элементы панели навигации выравниваются по горизонтали друг над другом. [изображение панели навигации с шириной: 100%

Кажется, я могу изменить ширину класса ".top-level-menu> li" на очень конкретное c число, и он заполняет мой экран, но он просто не заполнит ширину на 100%.

.third-level-menu {
  position: absolute;
  top: 0;
  right: -190px;
  width: 190px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu>li {
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
}

.third-level-menu>li:hover {
  background-color: gold;
}

.second-level-menu {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  /* width: 273.2px; */
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu>li {
  position: relative;
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
  width: 100%;
}

.second-level-menu>li:hover {
  background-color: gold;
}

.top-level-menu {
  background-color: red;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
}

.top-level-menu>li {
  position: relative;
  height: 30px;
  /* width: 273.2px; */
  background: #6640C1;
  z-index: 2;
  text-align: center;
}

.top-level-menu>li:hover {
  background-color: gold !important;
}

.top-level-menu li:hover>ul {
  display: inline;
}

.top-level-menu a {
  font-family: 'Fjalla One', sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  background: #6640C1;
  display: block;
  line-height: 45px;
}

.top-level-menu a:hover {
  color: #000000;
  background-color: gold;
}

<ul class="top-level-menu">
  <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
  <li>
    <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
    <ul class="second-level-menu">
      <li><a href="#">Jerseys</a></li>
      <li><a href="#">Hats</a></li>
      <li><a href="#">Gym Shorts</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
  <li>
    <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
    <ul class="second-level-menu">
      <li>
        <a href="#">Soccer</a>
        <ul class="third-level-menu">
          <li><a href="#">Barcelona</a></li>
          <li><a href="#">PSG</a></li>
          <li><a href="#">Real Madrid</a></li>
        </ul>

      </li>
      <li>
        <a href="#">Basketball</a>
        <ul class="third-level-menu">
          <li><a href="#">Golden State Warriors</a></li>
          <li><a href="#">Celtics</a></li>
          <li><a href="#">Chicago Bulls</a></li>

        </ul>
      </li>
      <li>
        <a href="#">Football</a>
        <ul class="third-level-menu">
          <li><a href="#">New England Patriots</a></li>
          <li><a href="#">Ravens</a></li>
          <li><a href="#">Atlanta Falcons</a></li>

        </ul>
      </li>

    </ul>
    <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
    </li>
  </li>

</ul>

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете использовать display: flex , чтобы заставить его работать.

Made changes to the code snippet here:
.top-level-menu {
            background-color: red;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100px;
            z-index: 1;
            display:flex;
            justify-content:space-between;
        }

        .top-level-menu>li {
            position: relative;
            height: 30px;
            /* width: 273.2px; */
            background: #6640C1;
            z-index: 2;
            text-align: center;
            flex:1;
        }

Answer 2

Я верю, что это то, чего вы хотите. Запустите сниппет, чтобы увидеть в действии.

Надеюсь, это помогло.

Я использовал display:flex и исправил некоторые отступы.

.third-level-menu {
  position: absolute;
  top: 0;
  right: -190px;
  width: 190px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu>li {
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
}

.third-level-menu>li:hover {
  background-color: gold;
}

.second-level-menu {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  /* width: 273.2px; */
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu>li {
  position: relative;
  height: 45px;
  background-color: #6640C1;
  background: #6640C1;
  width: 100%;
}

.second-level-menu>li:hover {
  background-color: gold;
}

.top-level-menu {
  list-style: none;
  width: 100%;
  height: 100px;
  z-index: 1;
  display: flex;
}

.top-level-menu>li {
  position: relative;
  height: 30px;
  background: #6640C1;
  z-index: 2;
  text-align: center;
}

.top-level-menu>li:hover {
  background-color: gold !important;
}

.top-level-menu li:hover>ul {
  display: inline;
}

.top-level-menu a {
  font-family: 'Fjalla One', sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  background: #6640C1;
  display: block;
  line-height: 45px;
  padding: 0px 15px 0px 15px;
}

.top-level-menu a:hover {
  color: #000000;
  background-color: gold;
}

<ul class="top-level-menu">
  <li><a href="#"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
  <li>
    <a href="#"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
    <ul class="second-level-menu">
      <li><a href="#">Jerseys</a></li>
      <li><a href="#">Hats</a></li>
      <li><a href="#">Gym Shorts</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
  <li>
    <a href="#"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
    <ul class="second-level-menu">
      <li>
        <a href="#">Soccer</a>
        <ul class="third-level-menu">
          <li><a href="#">Barcelona</a></li>
          <li><a href="#">PSG</a></li>
          <li><a href="#">Real Madrid</a></li>
        </ul>

      </li>
      <li>
        <a href="#">Basketball</a>
        <ul class="third-level-menu">
          <li><a href="#">Golden State Warriors</a></li>
          <li><a href="#">Celtics</a></li>
          <li><a href="#">Chicago Bulls</a></li>

        </ul>
      </li>
      <li>
        <a href="#">Football</a>
        <ul class="third-level-menu">
          <li><a href="#">New England Patriots</a></li>
          <li><a href="#">Ravens</a></li>
          <li><a href="#">Atlanta Falcons</a></li>

        </ul>
      </li>

    </ul>
    <li><a href="#"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us</a>
    </li>
  </li>

</ul>