title: Another CSS overlapping issue
body: <p>UPDATE: Here's a <a href="http://jsfiddle.net/J5PRt/5/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  
  <p>I want it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uTk7X.jpg" alt="What I want it to look like"></p>
  
  <p>... but it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/eF3iR.jpg" alt="What I don&#39;t want it to look like"></p>
  
  <p>The #container is horizontally centered, and must stay so. Can't seem to get this right...</p>