title: Background color around child elements
body: <p>I have 2 child anchor tags inside a parent div. I want to add a background color and some styles to the child divs without affecting the entire row. </p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>  &lt;div class= 'about-header-container header-info' id='about-header' style='display: block;'&gt;
      &lt;a class='bio-header tablink' href='#bio-dashfolio'&gt;Bio&lt;/a&gt;
      &lt;a class='timeline-header tablink' href='#timeline-dashfolio'&gt;Timeline&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.tablink {
    margin-right: 20px;
  }
  
  .header-info {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
  background-color: red; /* trial color*/
  }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/kesh92/t5zzk6oc/" rel="nofollow noreferrer">https://jsfiddle.net/kesh92/t5zzk6oc/</a> 
  Currently, the red affects the entire row from the <code>bio-header</code> child div. If I add a <code>width</code> property to the <code>.header-info</code> parent div, then there's no precise way to wrap it exactly around the children, especially given the red <code>background-color</code> for the children divs wraps itself perfectly around the first child div (being <code>bio-header</code>). Please help me add the red color around the children divs with equal left and right margins. 
  Thanks in advance!</p>
  
  <p>Edit: This is the result I want to achieve - 
  <a href="https://i.stack.imgur.com/ybBi0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ybBi0.png" alt="enter image description here"></a></p>