(Solved)Why using same code, the pic shows up in different places?

#1

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

#2

This is probably the culprit.

<header>
  <nav id="nav">
   <a href="#">About Me</a>
   <a href="#">Work</a>
   <a href="#">Contact</a>
  </nav>
<header> <!-- This is not closed! -->
#3

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/

1 Like
#4

Thanks…

#5

I will read that, thanks!!!