Header breaks when anything is inputted into body tag-CodePudding

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Space Mono"
      rel="stylesheet"
    />
    <title>xero.wtf</title>
    <link rel="stylesheet" href="styles.css" />
    <div >
      <h1>xero.<span>wtf</span></h1>
    </div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="skills.html">Skills</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </head>

  <body>
    <div ></div>
  </body>
</html>

this is for a personal portfolio, and when trying to add vertical lines for style, i can no longer navigate through the pages(home.skills,contact,about), this has never happened before and im at a standstill and cannot tell what is wrong, probably a noob question as i am new to front-end but came here as i cannot progress due to being stuck by this error.

Here is the CSS:

.title {
  color: rgb(198, 59, 172);
  font-family: "montserrat";
  position: relative;
  right: -80px;
  bottom: 30px;
  font-size: 30px;
}

body {
  background-color: #101010;
}

span {
  color: rgb(255, 255, 255);
}

li {
  font-family: "montserrat";
  text-decoration: none;
  list-style-type: none;
  display: inline;
  padding: 0px 40px;
  position: relative;
  right: -1100px;
  bottom: 120px;
  font-size: 30px;
  font-weight: 900;
  display: inline;
}

a {
  text-decoration: none;
  color: rgb(198, 59, 172);
}

.greeting {
  font-family: "Space Mono";
  position: relative;
  left: 80px;
  color: rgb(198, 59, 172);
  font-size: 30px;
}

.welcome {
  font-family: "Space Mono";
  position: relative;
  left: 80px;
  color: rgb(255, 255, 255);
  font-size: 30px;
}

.welcome span {
  font-family: "Space Mono";
  position: relative;
  left: -10px;
  color: rgb(198, 59, 172);
  font-size: 60px;
}

.v1 {
  border-left: 3px solid white;
  height: 600px;
  position: relative;
  left: 50px;
  top: -200px;
}

Thanks.

CodePudding user response：

div.title and ul must stay in the body

CodePudding user response：

UPDATED CODE

I have updated the code

You can view the code at https://playcode.io/929971

I did some few changes like wrapping your title and links in nav and then making them display flex so that they are in a same line.

And then to solve your vertical line issue. I have done it in a ::before pseudo-element and added styles to it.