title: Bootstrap Nav Collapse (Navigation) scroll - need to hide overflow
body: <p>I'm continuing development with my website and I have now reached another problem.</p>
  
  <p>When the nav bar collapses on smaller screens, there appears to be a scroll bar to suggest that there is overflow of the elements.</p>
  
  <p>I tried to use the <code>overflow:hidden</code> property to remove this problem in CSS, but it doesn't appear to work properly.</p>
  
  <p>See the screenshot and the code snippet below to see the problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
      font-family: 'montserratlight';
      src: url('montserrat-light-webfont.eot');
      src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-light-webfont.woff2') format('woff2'), url('montserrat-light-webfont.woff') format('woff'), url('montserrat-light-webfont.ttf') format('truetype'), url('montserrat-light-webfont.svg#montserratlight') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'montserratsemi_bold';
      src: url('montserrat-semibold-webfont.eot');
      src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff'), url('montserrat-semibold-webfont.ttf') format('truetype'), url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  #header {
      padding: 10px 0 0 0;
  }
  @media (min-width: 768px) {
      .navbar .navbar-nav {
          display: inline-block;
          float: none;
          vertical-align: top;
      }
      .navbar .navbar-collapse {
          text-align: center;
      }
      .navbar-brand {
          display: none;
      }
  }
  .navbar {
      margin-bottom: 0px;
      font-family: "montserratlight";
      text-transform: uppercase;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      border-radius: 0px;
  }
  img.logoEmpreus {
      margin-left: auto;
      margin-right: auto;
      display: block;
      margin-bottom: 10px;
  }
  img.logoEmpreus:hover {
      -webkit-animation-name: rubberBand;
      animation-name: rubberBand;
  }
  #page {
      margin: 0px auto;
  }
  li {
      display: inline;
      margin: 0 -1px;
  }
  li a {
      color: black;
      font-size: 16px;
      text-decoration: none;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  li a:hover {
      color: blue;
      font-size: 18px;
      text-decoration: none
  }
  li.active a {
      font-weight: bold;
      color: #333;
      text-decoration: none
  }
  ul {
      margin: 0 auto;
      font-family: "montserratlight";
      text-transform: uppercase;
  }
  .active {
      font-family: 'montserratsemi_bold';
  }
  .imageInside {
      position: relative;
      width: 100%;
      /* for IE 6 */
  }
  h2 {
      margin-top: 0px;
      margin-bottom: 0px;
  }
  h2 span {
      color: white;
      font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
      letter-spacing: -1px;
      background: rgb(0, 0, 0);
      /* fallback color */
      
      background: rgba(0, 0, 0, 0.7);
      padding: 10px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  #base ul {
      margin: 0 auto;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      padding: 10px;
      text-align: center;
      font-family: "montserratlight";
      text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
     &lt;title&gt;Problems | Stack Overflow&lt;/title&gt;
     &lt;!-- Tab Title --&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div id = "header"&gt;
        &lt;!-- Empreus logo Image. Animated. Width 300px. --&gt;
        &lt;img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" /&gt;
     &lt;/div&gt;
     &lt;div class="container"&gt;
        &lt;nav class="navbar navbar-default" role="navigation"&gt;
           &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
           &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Stack Overflow&lt;/a&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&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;!-- Collect the nav links, forms, and other content for toggling --&gt;
           &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Option 4&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#" class="active"&gt;&lt;b&gt;The Problem&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
           &lt;!-- /.navbar-collapse --&gt;
        &lt;/nav&gt;
        &lt;div class = "row"&gt;
           &lt;!-- Declaration of First Row --&gt;
           &lt;div class="imageHolder col-md-12" style="margin-top:10px;"&gt;
              &lt;!-- Image Container as DIV --&gt;
              &lt;div class = "imageInside hvr-underline-from-center" &gt;
                 &lt;h2&gt;&lt;span&gt;Logo Issue.&lt;/span&gt;&lt;/h2&gt;
                 &lt;img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" /&gt;
              &lt;/div&gt;
              &lt;!-- Image Link --&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
           &lt;div id = "base" class="col-md-12" style="margin-bottom:10px"&gt;
              &lt;p&gt;
              &lt;ul class="col-md-12"&gt;
                 &lt;!-- MAIN NENU BAR --&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Copyright Whatever&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- Unordered lists.--&gt;
              &lt;/p&gt;
           &lt;/div&gt;
           &lt;!-- Navigation HTML Markup --&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/flKVK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flKVK.png" alt="Image showing the overflow scroll bar"></a></p>
  
  <p>How can this scroll bar be removed?</p>