title: css: child items bigger than parent (100% not working as expected)
body: <p>I have this situation in which I'm using</p>
  
  <pre><code>height: 100%
  </code></pre>
  
  <p>on a parent, and in the parent I have this header which is 34px and a container which is 100% again.
  For some reason the container (ordered list) is bigger than the parent</p>
  
  <p><a href="http://jsfiddle.net/pu8QU/3/" rel="noreferrer">Here is a jsfiddle</a></p>
  
  <p>And here is the css</p>
  
  <pre><code>* {
     height: 100%;
     width: 100%;
     margin: 0;
     box-sizing: border-box;
  }
  section {
     padding: 10px 20px 20px 10px;
     border: 2px solid black;
  }
  
  header {
      height: 30px;
      background-color: blue;
  }
  
  ol {
      list-style-type: none;
      border: 1px dashed #d2d4d8;
      box-sizing: border-box;
      background-color: yellow;
      padding: 0;
  }
  
  li {
      display: inline-block;
      box-sizing: border-box;
      background-color: green;
      width: 30%;
      border: 1px solid blue;
      font-size: 0;
  }
  </code></pre>
  
  <p>Any suggestions why the ordered list is outside the parent <code>section</code> element ?</p>