title: Problems with margins and scroll bars
body: <p>I'm mostly a C++ programmer who's getting involved in HTML5 and Javascript. I'm having some trouble with my layouts and am asking for advice and some criticism of how I'm doing it.</p>
  
  <p>A reoccurring problem I'm having is unwanted scroll bars appearing when I add margin or padding. This is a mockup of a layout I'm working on for a Javascript application.</p>
  
  <p><a href="http://jsfiddle.net/Qy4Xz/" rel="nofollow">http://jsfiddle.net/Qy4Xz/</a></p>
  
  <p>Each box uses class 'text-line' to produce a line that my controls go in. I wanted to add a margin so the costs box items would have some space around them. When I add a 5px margin to text-line, my geometry box has scroll bars in each left/right panel.</p>
  
  <p><a href="http://jsfiddle.net/LD5TS/" rel="nofollow">http://jsfiddle.net/LD5TS/</a></p>
  
  <p>Here is where I'm adding the margins:</p>
  
  <pre><code>.text-line {
      font-size: 1.6em;
      box-sizing: border-box;
      width: 100%;
      margin: 0px;  /* no margins */
  }
  </code></pre>
  
  <p>This is probably a newbie mistake, but what am I doing wrong and how can I fix this? I run into this problem a lot, I've read a lot of material, but I'm missing something. If I'm making any other major layout mistakes can you point them out? Thank you!</p>