Bootstrap navbar won't collapse + small buttons

Question

I'm builing a website. This is the portfolio page: www.alweso.2ap.pl/portfolio.html

On all the other pages the navbar collapses on mobile phones, but not on this one. The code for the navbar is exactly the same as on the other pages:

<div class="container">
<div class="row">
<div class="col-md-12">
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="images/logo-kolor.png" alt="cafeteria"  class="logo-kolor"/></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="index.html" id="intro-scroll">Strona główna</a></li>
        <li><a href="omnie.html" id="about-us-scroll">O mnie</a></li>
        <li class="active"><a href="portfolio.html" id="services-scroll">Portfolio</a></li>
        <li><a href="#blog" id="portfolio-scroll">Blog</a></li>
        <li><a href="contact.html" id="team-scroll">Kontakt</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>

Also, the buttons on the portfolio page used for filtering the portfolio appear super small on mobile devices. Here's the code:

  <div class="container">
  <div class="row">
  <div class="col-md-12">
  <div class="btn-group">
  <button type="button" class="btn btn-large filter" data-filter=".wszystko">Wszystko</button>
  <button type="button" class="btn btn-large filter" data-filter=".niemowleta">Sesje niemowlęce</button>
  <button type="button" class="btn btn-large filter" data-filter=".dzieci">Sesje dziecięce</button>
  <button type="button" class="btn btn-large filter" data-filter=".sluby">Sesje ślubne</button>

</div>
</div>
</div>
</div>

CSS:

.btn, .btn-default, .btn:focus, .btn:hover, .btn:active {
margin-left: 0;
margin-right: 20px;
margin-bottom: 30px;
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
border: rgba(255,255,255,0) !important;
}

.btn, .btn-default {
 background-color: rgba(0,0,0,0.1);
 color: rgba(0,0,0,0.7);
}

If it comes to the navbar, I copy-pasted the code from other pages just to be sure it's exactly the same, but it doesn't help at all and I'm out of ideas. Help extremely appreciated.

Answer 1

On line 6 of html try and change

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

I validated the page in W3C click here to see