title: horizontally aligning multiple divs (CSS)
body: <p>I need to align these <code>div</code>s so that the space between "content1" and the red <code>div</code> equals the space between "content4" and the red <code>div</code>. <strong>I don't mind changing the blue-<code>div</code>'s margin but this should work for any width.</strong></p>
  
  <p>I used to achieve this by making the <em>width of the 4 blue <code>div</code>s + their left and right margins = 100%</em> but that doesn't seem to work well in this case.</p>
  
  <p>I also tried adding another <code>div</code> inside the red one that contained all the blue <code>div</code>s and giving it <code>margin: 0 auto</code> but that's not working either.</p>
  
  <p><a href="http://jsfiddle.net/FranLegon/L7qpgdkk/7/" rel="nofollow"><strong>Code in jsfiddle (updated)</strong></a></p>
  
  <p>PS: if i'm not clear enough, please feel free to edit my question.</p>