Problem
-------

I have these panels, which I have successfully changed the colors of:
[![enter image description here](https://i.stack.imgur.com/c22Xq.png)](https://i.stack.imgur.com/c22Xq.png)

But when I expand the panels, there is a thin grey border at the bottom of each panel header:

[![enter image description here](https://i.stack.imgur.com/gGPkL.png)](https://i.stack.imgur.com/gGPkL.png)
[![enter image description here](https://i.stack.imgur.com/dBRXz.png)](https://i.stack.imgur.com/dBRXz.png)

How can I get rid of that sliver of grey?

My Code
-------

*CSS*

```
.panel-wrong{
    border-color: #FED0D3;
}
.panel-wrong > .panel-heading{
    background: #FED0D3;
    color: #F53240;
    border-color: #FED0D3;
}

.panel-right{
    border-color: #E5FFFB;
}

.panel-right > .panel-heading{
    background: #E5FFFB;
    color: #02C8A7;
    border-color: #E5FFFB;
}

```

*HTML*

```
<div class="panel-group" id="accordion">
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                            </h4> </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4> </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">panel body 2</div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-right">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4> </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">panel body 3</div>
                        </div>
                    </div>
                </div>

```

[JSFiddle](https://jsfiddle.net/14ongm/wzepw41a/12/)