p1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debug Challenge - Navigation Bar</title>
<style>
  body {
    margin: 0;
    font-family: "Comic Sans", "Comic Sans MS", cursive;
    font-weight: 900;
  }

  .navbar {
    overflow: hidden;
    background: linear-gradient(to right, red, blue);
    position: fixed;
    top: 50%;
    width: 80%;
    margin: auto;
  }

  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }

  @media screen and (max-width: 768px) {
    .navbar a {
      float: none;
      display: none;
      text-align: left;
    }
  }
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Misplaced Navigation Bar Challenge</h2>
  <p>Your task is to debug the navigation bar to position it correctly at the top of the page.</p>
</div>

</body>
</html>