My navigation bar is misplaced and I can't figure out why

HTML-CSS
1

I have been looking for the past hour yet I can’t figure out why it is placed like this.

nav
nav1045×225 19 KB 

<header>
    <a href="index.html"><img id="game" src="../css/images/Game.jpg" alt="game-logo"></a>
      <nav>  
        <ul class="horizontal">
            
          <li>
             <a href="fortnite.html">Fortnite</a>
          </li>
          <li>
            <a href="vanguard.html">Call of Duty Vanguard</a>
          </li>
          <li>
            <a href="modern-warfare.html">Call of Duty Modern Warfare II</a>  
          </li>
          <li>
            <a href="index.html">Home</a>
          </li> 
        </ul>
      </nav>
    </header>

<header>
    <a href="index.html"><img id="game" src="../css/images/Game.jpg" alt="game-logo"></a>
      <nav>  
        <ul class="horizontal">
            
          <li>
             <a href="fortnite.html">Fortnite</a>
          </li>
          <li>
            <a href="vanguard.html">Call of Duty Vanguard</a>
          </li>
          <li>
            <a href="modern-warfare.html">Call of Duty Modern Warfare II</a>  
          </li>
          <li>
            <a href="index.html">Home</a>
          </li> 
        </ul>
      </nav>
    </header>
2

Sorry pasted the same thing,

.horizontal {
  margin: 25px;
  text-transform: uppercase;
  font-weight: 800px
}

.horizontal a {
  float: right;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Goldman', cursive;
}

.horizontal a::before,
.horizontal a::after {
  content: '';
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.horizontal a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #E6E6E6;
  border-right: 3px solid #fff;
  transform: translate(-100%, 50%);
}

.horizontal a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #E6E6E6;
  transform: translate(100%, -50%)
}

.horizontal a:hover:before,
.horizontal a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.horizontal a:hover {
  color: #E6E6E6;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.