Navigation bar at the top shows some background color around/above it [duplicate]

Take a look at the image attached to this question.

Red Nav Bar has black on top:

You see how there is black color around the navigation bar at the top of the page. It looks like it is floating?

How do I make it so that it is all red from edge to edge and all the way to the top of the page?

Here is my page code:

body {
  margin: 0;
  background-color: black;
}

h1 {
  color: red;
}
.nav {
  border: 1px solid #ccc;
  border-width: px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: red;
  font-size: 35px;
  float: clear;
}
.nav li {
  display: inline;
}
.nav a {
  display: inline-block;
  padding: 10px;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: blue;
}
li {
  border-right: 1px solid #bbb;
}
.center {
  margin: auto;
  width: 65%;
  background-color: white;
  padding: 10px;
  height: 100%;
}

<ul class="nav">
  <li><a href="/index.php">Home</a></li>
  <li><a href="/videos.php">Videos</a></li>
  <li><a href="/images.php">Images</li>
      <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

from Recent Questions - Stack Overflow https://ift.tt/3qs5Ifv
https://ift.tt/3gaiACn