title: Bootstrap accordion sidebar - remove panel spacing
body: <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>