title: How to get rid of spacing between Bootstrap panels?
body: <h2>The Problem</h2>
  
  <p><a href="https://i.stack.imgur.com/I5EFR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I5EFR.png" alt="enter image description here"></a></p>
  
  <p>There are spaces between my panels (outlined in red) and I want to get rid of them. I tried doing: </p>
  
  <pre><code>.panel {
      margin-top: 0; 
      margin-bottom: 0; 
      padding-top: 0; 
      padding-bottom:0;
  }
  </code></pre>
  
  <p>But it didn't work.</p>
  
  <p>For the white space at the very bottom of the page, I tried setting the encompassing <code>container</code> and <code>#Menu</code> to <code>margin-bottom: 0</code>, but that didn't work.</p>
  
  <p>If anyone could let me know how to get rid of the spacing, I would appreciate it very much!</p>
  
  <h2>My Code</h2>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;div class="panel-group" id="problem-panels"&gt;
                  &lt;div class="panel panel-default top-panel"&gt;
                      &lt;div class="panel-heading" data-toggle="collapse" href="#collapse1"&gt;
                          &lt;h4 class="panel-title"&gt;
                              Cox Substraction Level 1c
                          &lt;/h4&gt; 
                      &lt;/div&gt;
                      &lt;div id="collapse1" class="panel-collapse collapse in"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;ul class="nav nav-pills"&gt;
                                  &lt;li class="active"&gt;&lt;a&gt;11&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;12&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;13&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;14&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;h4 class="panel-title" data-toggle="collapse" href="#collapse2"&gt;
                              Cox Addition Level 3b
                          &lt;/h4&gt; 
                      &lt;/div&gt;
                      &lt;div id="collapse2" class="panel-collapse collapse"&gt;
                          &lt;div class="panel-body"&gt;panel body 2&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="panel panel-default bottom-panel"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;h4 class="panel-title" data-toggle="collapse" href="#collapse3"&gt;
                              Cox Subtraction Level 2a
                          &lt;/h4&gt; 
                      &lt;/div&gt;
                      &lt;div id="collapse3" class="panel-collapse collapse"&gt;
                          &lt;div class="panel-body"&gt;panel body 3&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>#problem-panels &gt; .top-panel{
      border-top: none;
  }
  
  #problem-panels &gt; .bottom-panel{
      border-bottom: none;
  }
  
  /*Get rid of grey border at top of panel body*/
  .panel-group .panel-heading + .panel-collapse &gt; .panel-body {
      border: none;
  }
  
  #problem-panels {
      margin-top: 20px;
  }
  
  .panel-title {
      font-weight: 600;
  }
  
  .panel-body{
      background-color: #F5F5F5;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/14ongm/3hrduq3f/1/" rel="nofollow noreferrer">JSFiddle</a></p>