Why does the child div's content break out of the parent div?
<p>So I am making a web design: <a href="http://codepen.io/wostensen/pen/woxYgX" rel="nofollow noreferrer">http://codepen.io/wostensen/pen/woxYgX</a></p>

<p>But I can't for the life of me understand why <code>.articles</code> won't stay in <code>.primary</code>. <code>overflow: hidden</code> does not give me a satisfactory result, as I want the user to be able to read all the blog posts. <code>display: block</code> does nothing at all to any parent element or even the element in question.</p>

<p>I can see that in Debug Mode + Developer Tools that <code>.articles</code> is flowing outside of <code>.primary</code> for no apparent reason. The footer is supposed to be the very end of the webpage, and the content is just flowing through it.</p>

<p>Are there anything I've simply missed?</p>