I tried several browsers and in every case the website works fine with Live Server. On the other hand, when I launch it using Firefox/Chrome, the site doesn't load my style.css at all, and when I use Edge, I get a message saying the file is missing. Here is my html and css code.
-----index.html-----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/style.css" />
<link
rel="stylesheet"
href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css"
/>
<link
rel="stylesheet"
href="/bootstrap/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"
/>
<title>Web Projekat</title>
</head>
<body>
<nav class="navbackgroundcolor navbar navbar-expand-lg navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarCenteredExample"
aria-controls="navbarCenteredExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div
class="collapse navbar-collapse justify-content-center"
id="navbarCenteredExample"
>
<!-- Left links -->
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item pe-5 fs-4">
<a class="nav-link" href="/html/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
><img
class="skate"
src="/media/icons8-skateboard-64 white.png"
alt="Home"
/></a>
</li>
<li class="nav-item ps-5 fs-4">
<a class="nav-link" href="/html/shop.html">Shop</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
<script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.js"></script>
<script src="/bootstrap/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
</body>
</html>
-----style.css-----
.skate {
height: 35px;
width: 35px;
}
.navbackgroundcolor {
background-color: #464648;
}
.navbar-link {
color: #c7c7c7 !important;
}
body {
background-size: cover;
background-color: #392727 !important;
}
I've tried renaming the file, changing the position of the lines in the code, rarely using a browser, rarely having similar posts, making different files but don't know what else, but nothing works.
