Why is my nav bar vertical and not horizontal

I have tried changing the display and getting rid of some code? probably erased the wrong thing or some code is overlapping? Im new to web development so if you can explain what I did wrong that will be great thanks. Check out Code on this JSFiddle link. https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR

.toc-nav {
  float: left;
  /*list-style: none;*/
  margin-top: 2%;
  /*margin-left: 10%;
    margin-right: 0%;*/
width: 100%;
  text-align: center;
}

.toc-nav li {
  display: incline;
  list-style-type: none;
}

.toc-nav li a {
  color: white;
  text-decoration: none;
  padding: 10px 70px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

.toc-liv li.active a {
  border: 1px solid white;
}

.toc-nav li a:hover {
  border: 1px solid white;
}

@media screen and (max-width: 500px) {
  .toc-nav li a {
    float: left;
    /*display: none;*/
    width: 100%;
    text-align: left;
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="js/classie.js"></script>

    <style>
        body,html {
            height: 100%;
            margin: 0;
            background-color: #2f3036;

        }

        b {
          color: black;
          font-family: "Teodor";
          font-size: 25px;
        }

        .bg {
            /* The image used */
            background-image: url("images/logo.png");

            /* Full height */
            height: 100%;

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        label {
            color: white;
        }
    </style>

</head>

<body>

    <header id="top"></header>

    <nav role="navigation">
        <ul class="toc-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#albums">Albums</a></li>
            <li><a href="#music">Music</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>


    <div class="bg"></div>

Solution

You have a spelling error in display: incline, it's actually spelled inline. That fixes it.