Bootstrap accordion sidebar - remove panel spacing
<p>Good day all.</p>

<p>I've been banging my head around with CSS but can't quite find the right styling to remove the space in between the header panels in a left side navbar.</p>

<p>I am looking to remove the (green) spacing shown <a href="https://drive.google.com/file/d/0ByHYNzCNBip7VVZndzNDVUoyV1E/view?usp=sharing" rel="nofollow">here</a>...anyone help with the CSS that would remove it?</p>

<p>My code looks like this:</p>



<pre><code>body {
  padding-top: 60px;
}
@@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
@@media (min-width: 767px) {
  .affix, .affix-top {
    position: fixed;
    width: 180px;
  }
}
.glyphicon {
  margin-right: 10px;
}
.panel-body {
  padding: 0px;
}
.panel-body table tr {
  padding: 0px 0px 0px 0px;
}
.panel-body table tr td {
  /*padding-left: 15px;*/
  padding: 0px 0px 0px 0px;
}
.panel-body .table {
  margin-bottom: 0px;
}
.panel-group.affix {
  background-color: green;
}
.panel {
  padding: 0px 0px 0px 0px;
}
.panel-heading {
  padding: 10px 0px 10px 0px;
  font-style: oblique;
  background-color: turquoise;
}
.panel &gt; .panel-heading &gt; .panel-title &gt; a {
  text-decoration: none;
}
.panel-title {
  background-color: gray;
}
.panel-body {
  background-color: orange;
}
.collapse.navbar-collapse {
  padding: 0px 0px 0px 0px;
  background-color: blue;
}
.pdsa-panel-toggle {
  float: right;
  cursor: pointer;
}
.panel,
.panel-group .panel-heading+.panel-collapse&gt;.panel-body {
  border: none;
}

/* For button glyph */
/* Icon when the collapsible content is shown */

/* .btn:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
  float: right;
  margin-left: 15px;
}
Icon when the collapsible content is hidden

.btn.collapsed:after {
  content: "\e080";
}
#accordion.affix-top {
  position: static;
  margin-top: 30px;
  width: 228px;
}
#accordion.affix {
  position: fixed;
  top: 70px;
  width: 228px;
}
.container {
  min-height: 100%;
  width: 100%;
  position: relative;
  background-color: Black;
  display: inline-block;
}
.row {
  width: 20%;
  top: 0px;
  left: 0px;
  bottom: 0px;
  position: absolute;
  background-color: Aqua;
} */
</code></pre>



<pre><code>&lt;nav class="navbar navbar-fixed-top navbar-inverse"&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sideNavBar"&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;SBConsignment&lt;/a&gt;
  &lt;/div&gt;
  &lt;ul class="nav navbar-nav pull-right"&gt;
    &lt;li class="dropdown"&gt;
      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                        robert.gagnon@doodle.com
                        &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
    &lt;li style="padding-removed1em"&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
&lt;div class="col-sm-2 col-md-2"&gt;
  &lt;div class="collapse navbar-collapse" id="sideNavBar"&gt;
    &lt;div class="panel-group affix" id="accordion"&gt;
      @*
      &lt;button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;Content&lt;/button&gt;*@ @*
      &lt;div class="panel panel-default" style="background-color:orange;"&gt;*@
        &lt;div class="panel"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h4 class="panel-title"&gt;
                                &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
                                    &lt;span class="glyphicon glyphicon-folder-close"&gt;
                                    &lt;/span&gt;Content
                                &lt;/a&gt;
                                &lt;a class="pdsa-panel-toggle"&gt;&lt;/a&gt;
                            &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
            &lt;div class="panel-body"&gt;
              &lt;table class="table"&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;span class="glyphicon glyphicon-pencil text-primary"&gt;&lt;/span&gt;&lt;a href="http://www.jquery2dotnet.com"&gt;Articles&lt;/a&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;span class="glyphicon glyphicon-flash text-success"&gt;&lt;/span&gt;&lt;a href="http://www.jquery2dotnet.com"&gt;News&lt;/a&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;span class="glyphicon glyphicon-file text-info"&gt;&lt;/span&gt;&lt;a href="http://www.jquery2dotnet.com"&gt;Newsletters&lt;/a&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;span class="glyphicon glyphicon-comment text-success"&gt;&lt;/span&gt;&lt;a href="http://www.jquery2dotnet.com"&gt;Comments&lt;/a&gt;
                    &lt;span class="badge pull-right"&gt;42&lt;/span&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>...</p>

<p>What I have tried:</p>

<p>I have tried all the styling I can think of and have run out of ideas</p>