Tiny space between the top of menu and the top of the website

I made a simple navigation bar, but there is a small space between the top of menu and the top of page.

body {
  margin: 0;
  padding: 0;
  font-family: Ubuntu, "times new roman", times, roman, serif;
}

.navbar {
  background-color: gray;
  color: white;
  list-style: none;
  text-align: center;
  padding-top: -15px;
  padding: 20px 0 20px 0;
}

.navbar>li {
  display: inline;
  padding-right: 5px;
}

.navbar>li>a {
  font-family: Ubuntu, "times new roman", times, roman, serif;
  text-decoration: none;
  color: white;
}

.navbar>li>a:hover {
  color: lightblue;
}

  
Main page
  
|
  
Basic HTML

Also another question - can I add this navigation bar to my actual site and if yes, how to do it?

Solved

.navbar {
 margin: 0; // add this line
 background-color: gray;
 color: white;
 list-style: none;
 text-align: center;
 padding: 20px 0 20px 0;
}

This will work.