How to get rid of spacing between Bootstrap panels?
<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>