I admit my code is quite messy, but this is my first project and I'm still figuring out how to properly structure it. I attempted to use margin with h2::before in CSS, and it sort of worked, but it caused other issues with the text layout. I've heard that JavaScript could be the solution, but I'm a total beginner in that area. Any assistance in solving this dilemma would be greatly appreciated. Thank you in advance!
function openNav() {
document.getElementById("mySidenav").style.width = "260px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}body {
background-image: url('https://i.imgur.com/oGNxInf.jpg');
background-size: cover;
margin-top: ;
}
<!-- More CSS code here -->
<!doctype html>
<html>
<head>
<title>Aldia, seeker of truth</title>
</head>
<body>
<ul id="topbar">
<li class="li"><a href="index.html">Home</a></li>
<!-- More HTML code here -->
</ul;
<!-- More HTML code here -->
<div class="Header">
<h1>Aldia, scholar of the first sin</h1>
<a href="#Description">Description</a>
<!-- More HTML code here -->
</div>
<div class="textblock">
<figure>
<img src="https://i.imgur.com/VqTZcGU.png" height="640" width="588" />
<div>
<figcaption>Aldia has become one with the flame after his last experiment turned him into a charred, immortal being.</figcaption>
</div>
</figure>
<div class="text">
<details open>
<summary>
<h2 id="Description" class="anchor">Description</h2>
</summary>
<!-- More HTML code here -->
</details>
<!-- More HTML code here -->
</div>
</div>
</html>