title: How to make a background color not overlap a border?
body: <p>im new to this site, and html/css aswell. Im trying to make some simpel stuff here, but im already stuck at this. </p>
  
  <p>Please have a look at this: <a href="http://jsfiddle.net/SoronSR/u6GEh/" rel="noreferrer">http://jsfiddle.net/SoronSR/u6GEh/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="column1-wrap"&gt;
          &lt;div id="column1"&gt;Column 1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="column2"&gt;Column 2&lt;/div&gt;
      &lt;div id="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
  border:5px solid #990000;
  border-radius:10px;
  }
  #column1-wrap {
      float: left;
      width: 100%;
  }
  #column1 {
      background-color: cyan;
      margin-right: 200px;
  }
  #column2 {
      background-color: lime;
      float: left;
      width: 200px;
      margin-left: -200px;
  }
  #clear {
      clear: both;
  }
  </code></pre>
  
  <p>The background color is overlapping the border at the edges. I want the background color to stay within the border. Can anyone help me with this?</p>