Html ve css'te sorun yaşıyorum?

Herkese merhaba ben herşeyi videodaki gibi yapmama rağmen neden yazılar beyaz olmuyor? Yardımcı olabilecek var mı?

https://dosya.co/2dtibkxevssj/javascript.rar.html

body {
    background-color: #f1f1f1;
}

.nav-main {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    z-index: 1000;
}

.btn-toggle-nav {
    width: 60px;
    height: 100%;
    background-color: #111;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    cursor: pointer;
}

.btn-toggle-nav:hover {
    opacity: 0.5;
    width: 60px;
    height: 100%;
    background-color: #111;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    cursor: pointer;
}

.nav-main ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}

.nav-main ul li {
    list-style: none;
    line-height: 60px;
}

.nav-main ul li a {
    display: block;
    height: 100%;
    padding: 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: arial;
    font-size: 16px;
}

.nav-sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 50px;
    height: calc(100vh - 60px);
    padding: 0 5px;
    background-color: #1b1b1b;
    z-index: 1000;
}

.nav-sidebar ul {
   padding-top: 15px;
   overflow: hidden;
   visibility: hidden
}

.nav-sidebar ul li {
   line-height: 60px;
   list-style: none;
}

.nav-sidebar ul li span, .nav-sidebar ul li a {
   display: block;
   height: 60px;
   padding: 0 10px;
   text-decoration: none;
   text-transform: uppercase;
   color: #FFF;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   white-space: nowrap;
}

.nav-sidebar ul li span, .nav-sidebar ul li a:hover {
    background-color: #222;
}





-------------------------------------------------
-------------------------------------------------

Html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/resetstyle.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <nav class="nav-main">
        <div class="btn-toggle-nav"></div>

        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
       
    </nav>


    <aside>

            <ul class="nav-sidebar">
                <li><span>href="#">Projects</span></li>
                <li><a href="#">Making</a></li>
                <li><a href="#">Creating a website</a></li>
                <li><a href="#">SEO optimizing a website</a></li>
                <li><a href="#">Just Other</a></li>
            </ul>

    </aside>

</body>

<script src="js/main.js"></script>

</html>