[Design with CSS 3788] box confusion

HEADERimage
HEADER2image

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• One
• Two
• Three
• Four
• Five
• Six
• Seven
• Eight
• Nine

Complete CSS noob here.

So thought I'd start with taking css layouts from recommendations on the web and then add my stuff and try to increase my understanding as I go along.

Now my question:
If I remove the word "mystery" from the attachment there is a small sliver of cream above the One,Two... ul-list and below the Headers.  Put back the "mystery" and the sliver is gone.

Any tips on how to approach/think about this?

[firefox: 22]

--
--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com
---
You received this message because you are subscribed to the Google Groups "Design the Web with CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to css-design+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.