Поплавки не работают, поэтому навигация не может идти горизонтально

Question

Хорошо, поэтому я хочу, чтобы моя навигация была горизонтальной на моей странице

Я пробовал использовать float и inline-block, чтобы решить эту проблему, но это не работает

.header {
  height: 95vh;
  background-size: cover;
  background-position: top;
  position: relative;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
  }

  &__logo {
    height: 35px;
    transform: scale(1.5);
    z-index: 4;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
  }
}



.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(30, 95, 156, 1) 1%,
    rgba(16, 55, 130, 0.2637429971988795) 100%
  );

  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  position: relative;
}


.header-links {
  position: fixed;
 width: 100%;
 z-index: 500;
 }

 .header-links li {
   color: white;
   display: inline;
   float: right;
   padding: 15px;
   font-size: 16px;
 }

 .header-links a {
   color: #757575;
   -webkit-transition: all 0.2s ease-in;
 }

 .header-links a:hover {
   color: #FF6363 !important;
 }

.hor-nav{
  position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
  z-index: 20;
  color: $color-white;
}

ul{
  list-style-type: none;
  
  color:$color-white;
}
li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<header class="header">
      <div class="gradient">
      </div>
      <video autoplay muted loop class="video">
        <source src="img/bg-video.mp4" type="video/mp4" />
      </video>
      
      <div class="header__logo-box">
        <a href="#"><img src="img/logo-white.png" alt="logo" class="header__logo" /></a>
      </div>
      <div class="hor-nav">
        <ul>
          <li><a href="#"></a>Home</a></li>
          <li><a href="#"></a>About</a> </li>
          <li><a href="#"></a>Invest</a></li>
          <li><a href="#"></a>Insights</a></li>
          <li><a href="#"></a>Technology</a></li>
          <li><a href="#"></a>Performance</a></li>
          <li><a href="#"></a>Education</a></li>
        </ul>
      </div>
      


       <!-- <ul>
          <li>Home</li>
          <li>About</li>
          <li>Invest</li>
          <li>Insights</li>
          <li>Technology</li>
          <li>Performance</li>
          <li>Education</li>
        </ul> -->



      





      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main"
            >Looking for a reliable source of Income for Life?
          </span>
          <span class="heading-primary--sub"> We have the solution!</span>
        </h1>
        <a href="#" class="btn btn--white btn--animated">Call us NOW!</a>
      </div>
    </header>

Answer 1

Удалить первый </a> из каждого пункта меню. HTML становится следующим:

<div class="hor-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a> </li>
    <li><a href="#">Invest</a></li>
    <li><a href="#">Insights</a></li>
    <li><a href="#">Technology</a></li>
    <li><a href="#">Performance</a></li>
    <li><a href="#">Education</a></li>
  </ul>
</div>

Этот CSS будет работать для hor-nav

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
.header {
  position: relative;
  height: 95vh;
  background-size: cover;
  background-position: top;
}
.hor-nav {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 20;
}
.hor-nav ul{
  list-style-type: none;
}
.hor-nav li {
  float: left;
}
.hor-nav li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
}
.hor-nav li a,
.hor-nav li a:focus {
  text-decoration: none;
  color: white;
}
.hor-nav li a:hover,
.hor-nav li a:active {
  text-decoration: none;
  color: yellow;
  outline: 0;
}

Suc6.

Answer 2

Вот простой трюк:

.hor-nav > ul {
   display: flex;
}

Answer 3

Просто удалите ширину вашей навигационной оболочки (.hor-nav). Таким образом, они будут выровнены рядом друг с другом.

.header {
  height: 95vh;
  background-size: cover;
  background-position: top;
  position: relative;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
  }

  &__logo {
    height: 35px;
    transform: scale(1.5);
    z-index: 4;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
  }
}



.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(30, 95, 156, 1) 1%,
    rgba(16, 55, 130, 0.2637429971988795) 100%
  );

  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  position: relative;
}


.header-links {
  position: fixed;
 width: 100%;
 z-index: 500;
 }

 .header-links li {
   color: white;
   display: inline;
   float: right;
   padding: 15px;
   font-size: 16px;
 }

 .header-links a {
   color: #757575;
   -webkit-transition: all 0.2s ease-in;
 }

 .header-links a:hover {
   color: #FF6363 !important;
 }

.hor-nav{
  position: fixed;
	top: 40px;
	right: 40px;
	height: 50px;
  z-index: 20;
  color: $color-white;
}

ul{
  list-style-type: none;
  
  color:$color-white;
}
li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<header class="header">
      <div class="gradient">
      </div>
      <video autoplay muted loop class="video">
        <source src="img/bg-video.mp4" type="video/mp4" />
      </video>
      
      <div class="header__logo-box">
        <a href="#"><img src="img/logo-white.png" alt="logo" class="header__logo" /></a>
      </div>
      <div class="hor-nav">
        <ul>
          <li><a href="#"></a>Home</a></li>
          <li><a href="#"></a>About</a> </li>
          <li><a href="#"></a>Invest</a></li>
          <li><a href="#"></a>Insights</a></li>
          <li><a href="#"></a>Technology</a></li>
          <li><a href="#"></a>Performance</a></li>
          <li><a href="#"></a>Education</a></li>
        </ul>
      </div>
      


       <!-- <ul>
          <li>Home</li>
          <li>About</li>
          <li>Invest</li>
          <li>Insights</li>
          <li>Technology</li>
          <li>Performance</li>
          <li>Education</li>
        </ul> -->



      





      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main"
            >Looking for a reliable source of Income for Life?
          </span>
          <span class="heading-primary--sub"> We have the solution!</span>
        </h1>
        <a href="#" class="btn btn--white btn--animated">Call us NOW!</a>
      </div>
    </header>