Ok why isn't this working, frustrating! I don't want there to be a border in my bootstrap menu once it's collapsed! I've tried everything but it's still there!

Here's my menu code:

 Toggle navigation

 German Magic Farm</span> -->

```
        </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">Home</a>
                </li>
                <li>
                   <a href="meet-pam-bauer.html">Meet Pam Bauer</a>
                </li>
                <li>
                    <a href="services.html">Services</a>
                </li>
                   <li>
                    <a href="sales.html">Sales</a>
                </li>
                 <li>
                    <a href="clinics.html">Clinics</a>
                </li>
                 <li>
                    <a href="photo-gallery.html">Photo Gallery</a>
                </li>
                 <li>
                    <a href="contact.html"> Directions & Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

```

And here's the css: (works perfect in Developer tools, but this isn't working in actuality)

```
 #bs-example-navbar-collapse-1 {
  border-color: none!important;}

.navbar-inverse .navbar-collapse {border-color:none!important;}

```

Here's the link in the live site: [Here's the link to live test site](http://www.amystout.com/germanmagic/index.html)