How to remove unsightly paddings around collapsible columns / accordion

Question

I have 6 columns in one row that are part of a panel group. When one column opens the other previously opened column closes. However, the layout has these unsightly paddings or borders around and the columns appear off-grid too. I tried to look for solutions but no luck.

Here is the output of the problem:

What I need to have:

Here is my problem code:

            <div class="container">
           <div class="row">
              <div class="panel-group" id="Heyaccordion">
                 <div class="panel panel-default col-sm-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopOneMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-piggy-bank"></span>&#160;&#160;&#160;PC Inventory<br/> </a> </h4> 
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopOneMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-ok"></span> 
                          <a href="#">&#160;&#160;&#160;Somewhere </a> </div> 
                    </div>
                 </div> 
                 <div class="panel panel-default col-sm-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopTwoMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopTwoMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopThreeMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopThreeMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopFourMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopFourMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopFiveMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopFiveMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div>
                    </div>
                 </div>
                 <div class="panel panel-default col-lg-2">
                    <div class="panel-heading">
                       <h4 class="panel-title">
                          <a href="#collapseTopSixMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTopSixMore">
                       <div class="panel-body">
                          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google</a> </div>
                    </div>
                 </div>
              </div>
           </div>
        </div> 

Answer 1

if you add the following it will fix the issue shown in the pictures:

#Heyaccordion .panel {
     margin-top: 5px;
     padding: 0;
     margin-left: 10px;
     margin-right: 10px;
     max-width: 164px;
}

Also is there a reason you are suing .col-sm-2 on the first two panels?