HTML fixed header fail id using - html

Question

I have a problem with my html code I refer to the id class but it is not going to there, but to another rule. I think the problem have to do with the fixed header, but I can't find the solution for this. This is my html code:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
z-index: 2;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>

Answer 1

Your spacer div appears to be sitting on top of your header. If you give your header a z-index the links work again:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
z-index:2;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>

Answer 2

They are scrolling to the right place, the only problem is they are going under the Red Header, so you see the wrong one, You can rectify this by increasing the spacer's height depending on which link is clicked. Hope this helps.
Updated : The solution can be found here as "codepen.io/ukneeq/pen/zsKIH"