var navLinks = document.getElementById("navLinks");
  function showMenu(){
      navLinks.style.right = "0"
  }
  function hideMenu(){
      navLinks.style.right = "-700px"
  }

header{
  background-color: black;
  background-position: center;
  background-size: cover;
  height: 12vh;
  width: 100%;
  z-index: 1;
  position: fixed;
}
.logo img{
  float: left;
  width: 70px;
  margin-top: 10px;
}
.main-nav{
  float: right;
  margin-top: 30px;
  list-style: none;
}
.main-nav li{
  display: inline-block;
}
.main-nav li a{
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
}
.main-nav li.active a{
  border: 2px solid #a40000;
  background-color: black;
}
.main-nav li a:hover{
  border: 2px solid #a40000;
  background-color: black;
}

<header>
    <div class="logo">
        <a href="r.html"><img src="logokm.png" alt="logokm"></a>
        <ul class="main-nav" id="navLinks">
            <img class="hm" src="close1.png" alt="c" onclick="hideMenu()">
            <li class="active"><a href="r.html">HOME</a></li>
            <li><a href="#ABOUTME">ABOUT</a></li>
            <li><a href="#MYSKILLS">SKILLS</a></li>
            <li><a href="#SERVICESOFFERED">SERVICES</a></li>
            <li><a href="#MYPROJECTS">PROJECTS</a></li>
            <li><a href="#CONTACTME">CONTACT ME</a></li>
        </ul>
        <img class="hm1" src="open1.png" alt="o" onclick="showMenu()">
    </div>
</header>