How to remove border after inset shadow box

Question

How do i remove the border in the image ? Adding both a background color and a box shadow to .box-wrap cause this border around the div. I want the colors to match.

<div id="box-shadow-wrapper" class="right-column" style="background-color: rgb(0, 84, 68);">
  <div class="box-wrap">
  </div>
</div>

.right-column {
    float: left;
    width: 600px;
    height: 531px;
    position: relative;
}

.box-wrap {
    width: 390px;
    height: 370px;
    margin: 77px auto 0;
    margin-top: 77px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    box-shadow: rgb(0, 84, 68) 0px 24px 13px 42px inset;
    background-color: white;
}

Code snippet

Answer 1

It is now working as intended with the overlay.

<div></div>
<div class="overlay"></div>

div {
    margin:10px;
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #005444 inset;
    border: 100px solid #005444;
}
div.overlay {
    margin-top:-310px;
}

I've found the solution here: box-shadow and border rendering bug