title: Making Navbar Transparent Bootstrap and Leftover chunks of color
body: <p>Firstly: I've been trying to make the navbar transparent, looked up how to here, but the solutions haven't quite worked (or at least not as I expected). I'm using bootstrap, this is my HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
     &lt;div class="navbar-inner"&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;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;List&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I added in this custom CSS to change the navbar to transparent:</p>
  
  <pre><code>.navbar-inner {
  background: transparent;
  background-color: transparent;
  border-width: 0px;
  </code></pre>
  
  <p>}</p>
  
  <p>The CSS loads properly, but nothing changes in the navbar (at least I assumed it would be white, since the browser background is?)</p>
  
  <p>I tried changing the background-color in the above CSS, and it did change it, but I got this result:</p>
  
  <p><a href="https://i.stack.imgur.com/PA7TO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PA7TO.png" alt="enter image description here"></a></p>
  
  <p>I'm wondering, even if I do get it transparent, how do I get rid of that bottom border (thought I set border-width to 0px already), and what are those black chunks on the side.</p>
  
  <p>Thanks!</p>