title: CSS keep div border from showing through a span
body: <p>Fiddle: <a href="https://jsfiddle.net/jzhang172/yh1gykgs/1/" rel="nofollow">https://jsfiddle.net/jzhang172/yh1gykgs/1/</a></p>
  
  <p>I am trying to have the header "Hello" background be transparent.... but I don't want the white div border to cross-over into the "Hello" header background.  I'm not sure how I can do this.</p>
  
  <p>The second part in the fiddle is the effect I'm trying to achieve.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img{
  width:100%;
  height:100%;
  }
  .header{
   padding-top:10px;
  
  }
  
  .section{
  position:relative;
  }
  
  #second{
   height:635px;
   padding-top
  }
  .about-us-info {
      margin: 0 auto;
      width: 900px;
      height: 313px;
      border: 2px solid #3c3c3c;
      position: absolute;
      left: 50%;
      margin-left: -450px;
      top: 50%;
      margin-top: -160px;
  }
  span.span-header {
      text-align: center;
      display: block;
      /* margin-top: -22px; */
      position: relative;
      font-size: 34px;
      background: white;
      width: 420px;
      margin: 0 auto;
      margin-top: -21px;
      /* border: 1px solid black; */
      text-transform: uppercase;
      font-family: latobold;
  }
  .about-us-info p {
      text-align: center;
      /* line-height: 28px; */
      line-height: 1.65em;
   
  }
  .about-us-info p.first {
  
      margin-top:35px;
  }
  /*--------------------------------------Third Section--*/
  
  #services-info{
   height:250px;
   margin-top:-125px;
   border:2px solid white;
  }
  #services-header{
  background:red;
  color:white;
  
  }
  
  /*--------------------------------------Fourth Section--*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="section" id="third"&gt;
    &lt;img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg"&gt;
       &lt;div class="about-us-info" id="services-info"&gt;
              &lt;span class="span-header" id="services-header"&gt;Hello&lt;/span&gt;
              &lt;p class="first"&gt;Blah Blah &lt;br&gt;
              Blah BLah
              &lt;/p&gt;
              &lt;p&gt; Blah Blah &lt;br&gt;
               Blah Blah&lt;br&gt;
               Blah Blah &lt;br&gt;
               Blah Blah&lt;br&gt;
               Blah Blah
              &lt;/p&gt;
         &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>