Problems with margins and scroll bars - css

Question

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.
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.
http://jsfiddle.net/Qy4Xz/
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.
http://jsfiddle.net/LD5TS/
Here is where I'm adding the margins:
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
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!

Answer 1

Since the .text-line elements have width:100%; they will naturally overflow the container if they have margin too, since margin does by default not get included in the width value.
What you could do if you want both space around the content and have the element fill its parent in width, is removing the margin:5px and adding this code to .text-line:
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
What the code above does is including the padding in the width value, thus you can add padding and the element will still only get the width value you declared.

Answer 2

try to add padding instead of margin and it will work fine. To understand exactly what's happening, please take a look at css box model