Bootstrap Navbar refuses to collapse when it should

I implemented Bootstrap Navigation Bar on the website and for responsiveness purposes I wanted it to collapse to a “hamburger menu” at certain device resolution (which I set using CSS). And of course it does not collapse at all when I resize the browser window to the specified resolution. I spent a few hours on checking the code for errors, yet I can’t find anything. Bootstrap links are attached to the page correctly, in a correct order, and the code for the navbar looks like so:
(As you see I added the collapsible class where it should be as well)

<section id="navigation">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#link1">link1</a>
          <li class="nav-item">
            <a class="nav-link" href="#link2">link2</a>
          <li class="nav-item">
            <a class="nav-link" href="#link3">link3</a>
          <li class="nav-item">
            <a class="nav-link" href="#link4">link4</a>

Important thing is that the same code I used for another page of mine and there it worked perfectly. Maybe there is something wrong with CSS then? Which for navbar elements looks like so:

.navbar {
  text-align: right;
  margin-right: 25%;

.nav-item {
  padding: 0 0.5em;
  list-style-type: none;
  display: inline-block;

.nav-link {
  font-weight: 400;
  color: #98a2a9;
  font-size: 1.2rem;
  letter-spacing: .1rem;
  text-decoration: none;

.navbar-nav .nav-item:hover .nav-link {
    color: #1e2022;

ul {
  padding-left: 0;

I will be grateful for help, as this is the last thing I’m doing for this website and after this it’s a wrap.