how to move menu bar top of the right side?

I am making a simple website project. In which step 1 is needed to create the navbar. But as soon as I made the navbar icon. I am not able to do it in the top right.

Which is the 3 lines option of the navbar in the right. How do I make it on the top of the right side?

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap');

body {
  background-color: tomato;
}
/* horizontal threline nav bar */
.navbar {
  width: 60px;
  margin-right: 20px;
  border-radius: 15px;
  float: right;
  border: 4px solid #00bfb6;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 50px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.two {
  width: 35px;
}
.three {
  width: 50px;
}
.navbar:hover div {
  width: 60px;
}

 
  <div class="logo">
    <h1 style="font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px;margin: 20px;">
      KB
      <span style="font-family:'Kanit', sans-serif; color: white;"> OFFICIALS </span>
    </h1>
    <div class="nav">
      <a href="" target="_blank" class="navbar">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </a>
    </div>
  </div>

Solution

Let's make your HTML a little simpler and move all styles to CSS. Also let's use "display: float;" in order to put both KB OFFICIALS and navbar into the same horizontal space. In this case you do not need "float: right;"

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap');

body {
  background-color: tomato;
}
h1 {
    font-family:'Kanit', sans-serif;
    border-width:3px;
    cursor: pointer; 
    border-style:solid; 
    border-color:#fff; 
    padding: 20px; 
    width: 205px;
    margin: 20px;
}
.logo {
    display: flex;
    justify-content: space-between;
}
/* horizontal threline nav bar */
.navbar {
  width: 60px;
  margin: 20px;
  border-radius: 15px;
  border: 4px solid #00bfb6;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 50px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.two {
  width: 35px;
}
.three {
  width: 50px;
}
.navbar:hover div {
  width: 60px;
}
.white-span {
    font-family:'Kanit', sans-serif; 
    color: white;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Practise Website</title>
</head>
<body>   
    <div class="logo">
        <h1>KB<span class="white-span"> OFFICIALS </span></h1>
        <div class="navbar"> 
            <a href="#" target="_blank">          
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div> 
            </a>            
        </div>
     </div>     
</body>
</html>