title: Parent div larger than child despite 100% width and height
body: <p>I have two divs, one container and one child with two different colors. When I change the margins, either on body or the parent div to a percentage amount, I get a sliver of the parent's background color shining through on the edges indicating that the parent is somehow slightly larger than the child (despite the fact that the child is 100% (or more) of the parent's width and height).</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child"&gt;test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  #parent {
  width: 98%;
  height: 60%;
  margin: 1% auto;
  position: relative;
  overflow-x: hidden;
  background-color: red;
  }
  
  #child {
  width: 200%;
  height: 100%;
  background-color: #337788;
  position: absolute;
  left: 0;
  }
  </code></pre>
  
  <p>Here's the jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/Cd2Sd/" rel="nofollow">http://jsfiddle.net/Cd2Sd/</a></p>
  
  <p>I know it has something to do with using a percentage value for the margin, because it depends on how I have the browser scaled. Are there any ways around this?</p>