Cara membuat background dibagian bawah menu fixed

Saya udah membuat menu fixed dan berhasil. tapi ketika saya mau menambahkan background dibagian konten/dibawah menu fixed tidak bisa. saya liat di developer tools bagian menu dan konten menyatu . mohon solusinya teman2. Ini kode saya

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
  </head>
  <body>
<div id="menu">
  <nav>
      <img src="logo.png" alt="">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">EVERYTHING</a></li>
        <li><a href="#">PROFILE</a></li>
        <li><a href="#">KONTAK</a></li>
      </ul>
    </nav>
  </div>

    <div id="isi">
      <h1>Judul</h1>
      <p>jkfdsjkfbdsjkfbdsjkfbjdskbfjkdsbfjkdsbjksdbfjksdbfkjdsbkjsdbjksdbv
      vsdvsdkjvdskjv dsjkvdsnjkvndsjkvndsjkvndsjkvnkdsjvnkdsjnvjsdkvds
    vdskjvsdkjvdsbvjkdsbvkjdsbvkjdsbvsdjkvbdsjkvbdsjkbvkjdsbv</p>

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

CSS

*{
  margin: 0px;
  padding: 0px;
}

nav{
  background-color: #b4b4b4;
  height:80px;
  position: fixed;
  width: 100%;
}

ul{
  float: right;
}

a{
  text-decoration: none;
  color: white;
}

a:hover{
  background-color: #e44be7;
}

li{
  list-style: none;
  color: white;
   font-family: 'Sansita', sans-serif;
  line-height: 80px;
  display: inline-block;
  font-size: 25px;
  padding-right: 10px;
  margin-right: 50px;
}

img{
  width: 150px;
  height: 80px;
  margin-left: 50px;
}

#isi{
  clear: both;
  padding-top: 80px;
}