Here are two codepen.io project.
Like I said in the title why the same picture appeared at different places?
One inside the header, one outside.
Which one is correct?
For example I want the pic appear outside the header, how am I make sure it does?
Here are 2 projects. Take a look at them:
inside the header
outside the header
This is probably the culprit.
<a href="#">About Me</a>
<header> <!-- This is not closed! -->
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/
I will read that, thanks!!!