'Is there a reason my CSS isn't being applied?

I'm building a site and I'm using Bootstrap for styling.

So far, it's just a title and navbar but it's not showing any CSS. If I open this, the entire navbar is stacked vertically and I also don't understand why my "Contact" button is indented with a bullet beside it. Could I get some input here? Let me know if there are further details needed to assess the situation.

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Portfolio Website</title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com
    /bootstrap/4.4.1/css/bootstrap.min.css"> 

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/
    4.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/
    [email protected]/css/fontawesome.min.css">

</head>

<body>
    <section id="nav-bar">

        <nav class="navbar navbar-expand-lg navbar-light">

            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" 
            data-target="#navbarNav" aria-controls="navbarnav" 
            aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

            </button>
          
            <div class="collapse navbar-collapse" id="navbar-nav">

              <ul class="navbar-navbar-nav">

                <li class="nav-item">

                  <a class="nav-link" href="#">Home </a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">About</a>

                </li>

                <li lass="nav-item">

                  <a class="nav-link" href="#">Projects</a>

                </li>

                  </div>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">Contact</a>

                </li>

              </ul>
      
               </div>

          </nav>

    </section>
    
</body>
htmlcss


Solution 1:[1]

I think it could be a cache problem, try Ctrl + Shift + R if you're on Windows or Command + Shift + R if you're on Mac, while you're on the browser trying to render.

Source: Force browser to refresh CSS, JavaScript, etc

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 me_zee

Related Questions