Navigation bar moving with content

Question

I have ran into a problem, i can't seem to find something similar to this.

My navigation bar is in the header. My page content is in the body, with a div called .page-content.

When I move my content with margin-top, so it moves away from the navbar, the navbar follows. While they are not in the same class or anything. Is there something I might be doing wrong?

The Code:

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}
header {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #5d585d;
  margin-top: 0px;
}
body {
  margin: auto;
  width: 100%;
  background-color: lightgray;
}
nav {
  margin-top: 0px;
}
nav ul {
  float: right;
  margin-top: 20px;
  margin-right: 150px;
  height: 25px;
}
nav ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
  display: inline-block;
}
nav ul li a {
  color: white;
  font-family: Arial;
  font-size: 16px;
}
nav {
  margin-top: 0px;
}
.page-content {
  margin-top: 40px;
}
.page-content {
  background-color: rgba(255, 255, 255, 0.23);
  margin: 0 auto;
  margin-top: 300px;
  width: 50%;
  display: table;
  border: 1px solid red;
  color: white;
}
.page-content p {
  margin: 0 auto;
  margin-top: 60px;
  display: table;
  border: 1px solid red;
}
.dropdownmenu {
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: #b4efed;
  color: #2a6d85;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #cbfffd;
}

<header class="navbarheader">
  <nav>
    <ul>
      <li><a href="index.php">HOME</a>
      </li>

    </ul>

    <div class="dropdown">
      <button class="dropbtn">OVER MIJ</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>



  </nav>
</header>

<div class="page-content">

  <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT
  </p>


</div>

Answer 1

because you are using position:fixed in header you need to set padding-top in .page-content

If you don't need it to be fixed then just remove that property.

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  background-color: lightgray;
}
header {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #5d585d;
}
nav ul {
  float: right;
  margin-top: 20px;
  margin-right: 150px;
  height: 25px;
}
nav ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
}
nav ul li a {
  text-decoration: none
}
.page-content {
  background-color: rgba(255, 255, 255, 0.23);
  margin: 0 auto;
  padding-top: 65px; /* new */
  width: 50%;
  display: table;
  border: 1px solid red;
  color: white;
}
.page-content p {
  margin: 0 auto;
  margin-top: 60px;
  display: table;
  border: 1px solid red;
}
.dropdownmenu {
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: #b4efed;
  color: #2a6d85;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #cbfffd;
}

<header class="navbarheader">
  <nav>
    <ul>
      <li><a href="index.php">HOME</a>
      </li>
    </ul>
    <div class="dropdown">
      <button class="dropbtn">OVER MIJ</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </nav>
</header>
<div class="page-content">
  <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT
  </p>
</div>