I am facing an issue with my website where it appears distorted when launched on a live server, despite working fine locally. It seems that the Bootstrap styles are not being applied correctly on the live server and I cannot figure out why. If anyone knows the reason behind this problem, please help.
Code snippet provided below has been edited for readability:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="C:\Users\abhay agnihotri\Desktop\Bootstrap\css\bootstrap.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-expand-sm navbar-dark bg-dark fixed-top">
<a href="#" class="navbar-brand">
<div class="on" id="content container alpha">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars fa-2x"></i>
</a>
</span>
<div class="nav d-flex flex-sm-row flex-column">
<div id="menu" class="nav va" style="scroll-behavior: unset;">
<a href="#" class="close" onclick="closeSlideMenu()"><i class="fas fa-times"></i></a>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-8 col-xs-12">
<div class="some1 a"><a>HOME</a><br></div>
<div class="some2 b"><a class="some2 b" href="aboutus.html" style="text-decoration: none;">ABOUT</a><br></div>
<div class="some3 c"><a class="some3 c" href="team.html" style="text-decoration: none;">TEAM</a><br></div>
<div class="some4 d"><a class="some4 d" href="#ourmenu" style="text-decoration: none;">OURMENU</a><br></div>
<div class="some5 e"><a class="some5 e" href="gallery.html" style="text-decoration: none;">GALLERY</a><br></div>
<div class="some6 f"><a class="some6 f" href="contact.html" style="text-decoration: none;">CONTACT</a><br></div>
</div>
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-0"></div>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="main">
<img src="cart2.png" class="cart img-fluid">
<input type="text" class="text-center item" id="inc" value="0"></input>
</div>
<img src="add2.png" class="add img-fluid">
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item z active car carss img-fluid"></div>
<div class="carousel-item van men img-fluid"></div>
<div class="carousel-item maruti women img-fluid"></div>
</div>
</div>
</header>
<div class="container">
<div class="text-center row" style="margin-top:-660px;">
<div class="col-lg-3 col-md-1 col-sm-1 col-xs-0">
<div class="text-light col-lg-6 col-md-10 col-sm-10 col-xs-12">
<h1 class="head">PIZZERIA</h1>
<h3 class="text-center foot">SPICYFOOD</h3>
<img class="logo" src="kn.png" width=50 height=50 class="media">
</div>
<div class="col-lg-3 col-md-1 col-sm-1 col-xs-0"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>