title: I am trying to put a border around .navbar-collapse but can't seem to achieve it
body: <p>I am trying to add a border around my drop down menu which appears for mobile sizes. Thought it would be to control through <code>.navbar-collapse</code> but it doesn't seem to be working. Any ideas?</p>
  
  <p>Sample pic of mobile size:</p>
  
  <p><a href="https://i.stack.imgur.com/O9oA1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O9oA1.png" alt="enter image description here"></a></p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;I am fouridine&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;design&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;animation&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;other art&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--/.nav-collapse --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS for nav is as such:</p>
  
  <pre><code>@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 &gt; .navbar-header, .container-fluid &gt; .navbar-header, .container &gt; .navbar-collapse, .container-fluid &gt; .navbar-collapse {
      margin:0;
      border:0 30px 30px 30px;
  }
  .nav &gt; li &gt; a {
      padding: 5px 20px 5px 20px;
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #47c4c0;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover, .navbar-default .navbar-nav &gt; li &gt; a:focus {
      color: #666666;
  }
  .navbar-default .navbar-nav &gt; .active &gt; a, .navbar-default .navbar-nav &gt; .active &gt; a:hover, .navbar-default .navbar-nav &gt; .active &gt; 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;
  }
  </code></pre>