Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 1400px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 200px;
background-color: #ABEBC1;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons"><a href="#C4">About Us</a></div>
<div class="buttons">Our Staff</div>
<div class="buttons">New Admissions</div>
<div class="buttons">A-Level</div>
<div class="buttons">GCSE</div>
<div class="buttons">Contact Us</div>
</div>
</div>
<br/>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
I utilized the HTML code from an example on w3schools that enables users to navigate to different sections of a webpage via hyperlinks. The issue I am facing is when clicking on "Chapter 4" or "About Us," it redirects to a different section instead of the intended one. Is there any way to resolve this problem?
EDIT: It appears that the navigation is functioning correctly; however, the targeted section appears beneath the top bar, obstructing the view. Is there a method to adjust this so that the content displays below the top bar?
Thank you