Bootstrap 3 navbar not closing

I made a website for my son. When the page is not full width the navbar doesn’t shut. This is a link to the live page http://leggacysoccer.com What can I do to fix this? I’ve tried a few different things based upon searching Google but nothing seems to help.

https://codepen.io/mlegg10/pen/oeZKbr

    <header id="navigation" class="navbar-fixed-top animated-header">
    <div class="container">
    <!-- Navigation -->
    <div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
    <nav class="navbar">
    <div class="container-fluid">
    <!-- Mobile Toggle Button and stuff -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
Menu <i style="font-size:24px" class="fa fa-arrow-circle-down"></i>
    </button>
    <a href="#" class="pull-left navbar-brand">Leggacy Soccer</a>
    </div>
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- End of mobile toggle button -->
    <!-- Start of the navbar -->
    <div class="collapse navbar-collapse" id="primary-navigation">
    <ul class="nav nav-justified">
    <li><a href="#top"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#lessons">Lessons</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="https://www.facebook.com/Leggacy-Soccer-1907852272813168/" target="_blank"><span class="fa fa-facebook"></a></li>
    <li><a href="https://twitter.com/LeggacySoccer" target="_blank"><span class="fa fa-twitter"></span></a></li>
    <li><a href="https://www.instagram.com/leggacysoccer/" target="_blank"><span class="fa fa-instagram"></a></li>
    </ul>
    </div>
    </div>
    </nav>
    </div>
    </header>

Custom css is here http://leggacysoccer.com/css/custom.css

thank you very much
it works as I wish now