My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts for the font. How can I troubleshoot this?
Below is the content of index.html page:
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!--<link href="assets/css/all.css" rel="stylesheet">-->
<title>bootstrap</title>
</head>
<body>
<nav class="navbar navbar-light bg-light navbar-expand-md">
<div class="container">
<!-- pro botao hamburg aparecer na esquerda, igual no rede market, eh so botar ele antes da logo-->
<a class="navbar-brand" href="#"><img src="images/Rio-Turismo.png" width="90px"
alt="Rio Turismo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu"
aria-controls="menu" aria-expanded="false" aria-label="Botão de navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link" href="#passeios">Passeios</a>
<a class="nav-item nav-link" href="#excursoes">Excursões</a>
<a class="nav-item nav-link dropdown-toggle" href="#">Passeios Culturais</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Museus</a>
<a class="dropdown-item" href="#">Feiras</a>
<a class="dropdown-item" href="#">Bibliotecas</a>
<a class="dropdown-item" href="#">Livrarias</a>
</div>
<a class="nav-item nav-link" href="#">Reservas</a>
<a class="nav-item nav-link" href="#header">Contato</a>
</div>
<div class="d-none d-sm-block">telas small pra cima</div>
<!--div q n eh mostrada em mobile-->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#pedidos">Meus Pedidos</a>
<a class="nav-item nav-link" href="#janelamodal">Entrar</a>
</div>
</div>
</div>
</nav>
<img src="images/panoramica1.jpg">
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/script.js"></script>
</body>
</html>