HTML & CSS Header fixed on top while scrolling

[Developsom]

Hi,

For a school assignment i have to fix my header on top but when i use my code it gets messed up and lands somewhere in the middle of the page.

#h1 {
    color: white;
    background-color: hsl(63, 56%, 38%);
    border-style: dotted;
    border-color: black;
    padding: 50px;
    text-align: center;
    position: fixed;
    bottom: 20px;
}

 

[Developsom]

Hi,

For a school assignment i have to fix my header on top but when i use my code it gets messed up and lands somewhere in the middle of the page.

#h1 {
    color: white;
    background-color: hsl(63, 56%, 38%);
    border-style: dotted;
    border-color: black;
    padding: 50px;
    text-align: center;
    position: fixed;
    bottom: 20px;
}

Update:

So i have fixed the header but now it overlaps my .main {}.

#h1 {
    color: white;
    background-color: hsl(63, 56%, 38%);
    border-style: dotted;
    border-color: black;
    padding: 50px;
    text-align: center;
    position: fixed;
    left: 210px;
    bottom: 460px;
}

#main{
    border-color:hsl(63,56%,10%);
    border-style: solid;
}

 

[Johna]

Can I see some HTML?

 

[Developsom]

Can I see some HTML?

Yes, of course.

I chose to delete my css file and read the books again, make notes etc and try it again after that..

I will be a master coder one day i have promised myself haha

<body>
<header>
    <h1 id="h1">Als we alles zouden toepassen wordt het een zooitje</h1>
</header>
<main id="main">
    <article class="article">
        <h2>Maak de schaduw op elementen nooit te heftig</h2>
        <div class="circle-one"></div>
        <div class="circle-two"></div>
    </article>
    <article class="article">
        <h2>Gebruik niet zoveel verschillende borders als hier</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. </p>
    </article>
    <article class="article">
        <h2>Lorum ipsum dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. </p>
    </article>

 

[Johna]

Thanks, I'll try and see if I get an answer soon.


Why are many web developers Dutch? (including myself)