The index.html file contains a list of links to lectures.
When hovering over each link, it should have a right padding of 30px.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <style>
      ul {
        list-style: none;
        padding: 0;
      }
      li {
        margin-bottom: 12px;
      }
      h2 {
        font-family: monospace;
      }
      a {
        text-decoration: none;
        padding: 5px 10px;
        color: white;
        font-weight: bold;
        font-family: monospace;
        background-color: rgb(255, 198, 0);
      }
    </style>
  </head>
  <body>
    <h2>Lectures</h2>
    <ul>
      <li>
        <a href="https://js.coderslang.com/lecture/205">Lists lecture</a>
      </li>
      <li>
        <a href="https://js.coderslang.com/lecture/207">Document structure lecture</a>
      </li>
      <li>
        <a href="https://js.coderslang.com/lecture/206">Tables lecture</a>
      </li>
    </ul>
  </body>
</html>