<Header> tag positioning

I can’t understand <header> tags. For some reason when I create 2nd, 3rd… <header> tag, it appears at the top of the page. What I want is, that the tags would continuosly go to the bottom of the text what I already created.
For example, I have bunch of paragraphs with 1 header at top, and then I want to create another <header> tag for another section. But it appears at the top of the page, not down the text.
Here is my whole code: https://codepen.io/patri22k/pen/XWzjVBd?editors=1100
I would be thankful for any help.

It’s not the <header> where the problem is.
All of your <section>s have class='main-class'
You styled .main-class in your CSS as follows

position: absolute;
top: 0px;

So all the <section>s jump to the top of the page and stack on top of each other.
Hope this helps.

Oh wow, what a stupid mistake lol! Thanks a lot, now it works :d

There’s no such thing as a stupid mistake if you’re learning from your mistakes! Keep up the good work. :slight_smile:


Hi @Patri22k, I noticed you were using <header> tags like a <h1-h6> tags. Keep in mind that an HTML <header> is a container for content or a set of navigational links. It contains <h1> - <h6> and sometimes logo or icon and also can contain author info. It’s important to note this for SEO. So it would be:

<h1>Why freeCodeCamp Is Awesome</h1>
<p>Posted by Hal_Jordan</p>
<p>Some additional information here</p>
<p>Lorem Ipsum dolor set amet....</p>

<p> &copy; Copyright 2022, Sector 2814 </p>
// Hope this might help.

1 Like

Thanks for checking my code. I’m going to fix this rn!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.