Text overlapping navigation bar when resizing browser window

I'm trying to create my first webpage for my portfolio but my text keeps overlapping the navigation bar on the left and I don't know why! I have tried different methods but nothing has worked so far and I just don't understand what seems to be the problem! I'm new to HTML and CSS so I'm probably doing something wrong without realising it :)

This is my code:

/* Heading Styles -----------------------*/

.main-header {
  padding-top: 0x;
  height: 250px;
  text-align: right;
}

#background-image {
  background: url("../banner/pilved.jpg") no-repeat center;
  background-size: cover;
}


/*Welcome to text------------------------------------*/

.first-line-title {
  font-size: 35px;
  color: white;
  font-weight: normal;
  font-style: italic;
  position: fixed;
  top: 30%;
  right: 35%;
}


/* AvesDEsign's portfolio text---------------------*/

.second-line-title {
  font-size: 90px;
  color: white;
  font-weight: normal;
  line-weight: 1.3;
  position: absolute;
  overflow: hidden;
  top: 40%;
  right: 8%;
}


/* Navigation bar -------------------------*/

* {
  margin: 0;
  padding: 0;
  font-family: Avenir;
}

nav {
  width: 250px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.2);
  line-height: 80px;
  text-align: center;
}

nav ul {
  float: left;
  margin-left: 45px;
  margin-top: -5px;
}

nav ul li {
  list-style-type: none;
  transition: 0.8s all;
  font-family: Avenir;
}

nav ul li:hover {
  background-color: #d0d6da;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 30px;
}


/* Logo information------------------------------*/

.logo {
  margin-left: -8px;
  margin-top: 40px;
}

<!doctype html>
<html lang="en">

<head>
  <title>AvesDesign</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="background-image">
    <nav>
      <img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">EXPERIENCE</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <header class="main-header">
      <div class="first-line-title">Welcome to</div>
  </div>
  <div class="second-line-title">AvesDesign's portfolio
    </h1>

  </div>
  </header>
</body>

</html>

Solution

There are definitely some errors to be found, but let me start that you should place your HTML and CSS in the assigned areas of the editor and not make separate blocks.

In the HTML you had your code mixed up. div tags and header were not closed properly due to placing the closing tags in wrong places. you were also missing an opening h1 tag. View the HTML code and compare it with what you have

Next was to place position:relative in the main-header CSS declaration.

.main-header {
  position: relative;
  padding-top: 0x;
  height: 250px;
  text-align: right;
}

Make these changes and it will give you likely a leap in the right direction.

/* Heading Styles -----------------------*/

.main-header {
  position: absolute;
  width: 100%;
  top: 0;
  height: 250px;
  text-align: right;
  z-index: 0;
}

#background-image {
  background: url("../banner/pilved.jpg") no-repeat center;
  background-size: cover;
}


/*Welcome to text------------------------------------*/

.first-line-title {
  font-size: 35px;
  color: red;
  font-weight: normal;
  font-style: italic;
  /* CHANGE POSITION FROM FIXED TO ABSOLUTE */
  position: absolute;
  top: 30%;
  right: 35%;
}


/* AvesDEsign's portfolio text---------------------*/

.second-line-title {
  font-size: 40px;
  color: green;
  font-weight: normal;
  line-height: 1.3;
  position: absolute;
  overflow: hidden;
  top: 40%;
  right: 8%;
}


/* Navigation bar -------------------------*/

* {
  margin: 0;
  padding: 0;
  font-family: Avenir;
}

nav {
  position: relative;
  float: left;
  width: 250px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.8);
  line-height: 80px;
  text-align: center;
  z-index: 999;
}

nav ul {
  padding: 0;
  margin-left: 45px;
  margin-top: -5px;
  z-index: 9999;
}

nav ul li {
  list-style-type: none;
  transition: 0.8s all;
  font-family: Avenir;
}

nav ul li:hover {
  background-color: #d0d6da;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 30px;
}


/* Logo information------------------------------*/

.logo {
  margin-left: -8px;
  margin-top: 40px;
}

<!doctype html>
<html lang="en">

<head>
  <title>AvesDesign</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="background-image">
    <nav>
      <img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">EXPERIENCE</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <header class="main-header">
      <div class="first-line-title">Welcome to</div>

      <div class="second-line-title">
        <h1>AvesDesign's portfolio
        </h1>
      </div>
    </header>
  </div>
</body>

</html>