I’m not a specialist yet, but here are some of the things I know.
the elements of HTML can work like boxes or inline, for you to keep them together inside something you must wrap it inside a div or tag element like the header element you used in both examples, at full width this will keep things together inside , but when you decrease the width of the page you might have some problems with layout as the image and other elements have a tendency to overlay each other, pushing one another to a different position.
I got a much better understanding of layouts after I read this article : http://learnlayout.com/