title: Debugging CSS page overflow
body: <p>My <a href="http://wishes.info/wedding" rel="nofollow">page</a> is overflowing to the right (there is extra empty space causing a horizontal scrollbar). CSS file is <a href="http://wishes.info/css/all.css" rel="nofollow">link to css</a>. </p>
  
  <p>The practice I have followed is - in the beginning, setting padding &amp; margin 0 for all used html elements. Then, the top level boxes have width+padding+margin &lt;= 100% to the best of my observation. More importantly, I have debugged in Chrome Developer Tools and Firebug (in Firefox). I went through each container box in the hierarchy in body tag, and each one's width is same as window width. Why then the overflow? </p>
  
  <p>On a related note,  if div A contains  divs B &amp; C, then A's width will be at least max(width(B), width(C)), right?</p>