I am trying to add a border around my drop down menu which appears for mobile sizes. Thought it would be to control through `.navbar-collapse` but it doesn't seem to be working. Any ideas?

Sample pic of mobile size:

[![enter image description here](https://i.stack.imgur.com/O9oA1.png)](https://i.stack.imgur.com/O9oA1.png)

My code is as follows:

```
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">I am fouridine</a>
            </li>
            <li><a href="#about">design</a>
            </li>
            <li><a href="#contact">animation</a>
            </li>
            <li><a href="#">other art</a>
            </li>
            <li><a href="#">contact</a>
            </li>
        </ul>
        </ul>
    </div>
    <!--/.nav-collapse -->
</nav>

```

CSS for nav is as such:

```
@media (min-width: 768px) {
    .navbar {
        display: none;
    }
}
.navbar {
    min-height:0;
}
.navbar-nav {
    margin:0;
}
.navbar-default {
    background-color:#47c4c0;
    border:0;
    height:30px;
    font-size: 16px;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin:0;
    border:0 30px 30px 30px;
}
.nav > li > a {
    padding: 5px 20px 5px 20px;
}
.navbar-default .navbar-nav > li > a {
    color: #47c4c0;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #666666;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: #47c4c0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:0;
}
.navbar-collapse {
    padding:0;
    background:white;
    border-style:solid;
    border-color:#47c4c;
    border:0 30px 30px 30px;
}
.navbar-toggle {
    padding: 8px;
    margin: 0;
    border:0;
    border-radius: 0;
}
.navbar-toggle .icon-bar {
    width: 15px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: white;
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #47c4c0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: white;
}

```