title: Margin left and right -10px in a container
body: <p>I'm trying to make a menu to have a "ribbon-like" 3d effect were it should "wrap" over the container.</p>
  
  <p>Problem is that it doesnt matter if I try margin-left and right to be -10px, it just pushes the div 20px to the left. (atleast in chrome). And left: -10px; and right: -10px doesnt work either. What might be missing?</p>
  
  <p><a href="http://jsfiddle.net/lasseedsvik/UhwYg/1/" rel="nofollow">http://jsfiddle.net/lasseedsvik/UhwYg/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="top-menu"&gt;
          &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
      background: blue;
      height: 300px;
      width: 200px;
      margin: 0 auto;
  }
  
  #top-menu {
      clear: both;
      background: red;
      width: 200px;  /* +20px? */
      height: 20px;
      position: relative;
      /*
      margin-left: -10px;
      margin-right: -10px;
      */
  }
  
  #top-menu::before, #top-menu::after {
      content:' ';
      position: absolute;
      bottom: -10px;
  }
  
  #top-menu:before {
      border-top: 10px solid red;
      margin-left: -10px;
      border-left: 10px solid transparent;
      left: 0;
  }
  
  #top-menu:after {
      border-top: 10px solid red;
      margin-right: -10px;
      border-right: 10px solid transparent;
      right: 0;
  }
  </code></pre>