title: <div> header border issue
body: <p>I just created this div (for a floating viewport), in which I also have a header div. As you can see in the image below, the black background (from the main frame) is showing around the yellow header.
  How can I NOT see a black line around the header. I want the yellow of the header background to bleed into the yellow of the frame border.</p>
  <p>Here is my css code for both div:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mydiv {
    position: absolute;
    z-index: 0;
    width: 250px;
    height: 250px;
    top: 300px;
    left: 100px;
    background-color: black;
    border: 2px solid #e8ff26;
    text-align: center;
    box-shadow: 2px 2px 4px #888888;
  }
  
  #mydivheader {
    padding: 3px;
    cursor: move;
    z-index: 0;
    /* border: 2px solid #e8ff26; */
    background-color: #e8ff26;
    /* color: #e8ff26; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="desktop"&gt;
    &lt;div id="mydiv"&gt;
      &lt;!-- Include a header DIV with the same name as the draggable DIV, followed by "header" --&gt;
      &lt;div id="mydivheader"&gt;iris - virtual learning device&lt;/div&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;video width="247" autoplay loop muted&gt;
                                  &lt;source src="./videos/SCI6477_IRIS.mp4" type="video/mp4"&gt;
                              &lt;/video&gt;
      &lt;!-- &lt;p&gt;Move This DIV&lt;/p&gt; --&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>other css div:</p>
  <pre><code>/* if desktop */
  .mobile_device_380px {
      display: none;
  }
  .mobile_device_480px {
      display: none;
  }
  
  
  /* if mobile device max width 380px */
  @media only screen and (max-device-width: 380px) {
      .mobile_device_380px{display: block;}       
      .desktop {display: none;}
  } 
  
  /* if mobile device max width 480px */
  @media only screen and (max-device-width: 480px) {
     .mobile_device_480px{display: block;}
     .desktop {display: none;}
  }
  </code></pre>
  <p>This is the issue -&gt;</p>
  <p><a href="https://i.stack.imgur.com/mqTwk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mqTwk.png" alt="current rendering of div" /></a></p>
  <p>This is what it should look like -&gt;
  I am getting this when I drag the frame around, some places it shows the correct one, other places shows the wrong one.
  <a href="https://i.stack.imgur.com/i2aXw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i2aXw.png" alt="enter image description here" /></a></p>