Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on top of the first one. To fix this, I added padding using an ID for the second section, but the padding is applied from the top of the page rather than the section above it. If I remove the padding, "About Me" overlaps with the background of the first section containing links.
#firstlink {
padding: 15px 50px 0px 0px
}
#linkbar {
background-color: blue;
height: 15%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
li {
font-size: 35px;
padding: 15px 10px 0px 0px;
float: right;
display: inline;
}
#aboutme {
padding: 75px 0px 0px 0px;
}<section id="linkbar">
<ul>
<li id="firstlink">link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</section>
<section id="aboutme">
<h1>About Me</h1>
</section>
<section>
<h1>My Portfolio</h1>
</section>
<section>
<h1>Contact Me</h1>
</section>