How to stick vertical text nav bar to right without gaps?

I can't figure out a way to stick the navigation bar to right without 'gaps'. I tried different margins like 0px but it didn't work either. I'm trying to achieve this navigation interface

My HTML and CSS :

html,
body {
  height: 100%;
  margin: 0;
}

nav {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  float: right;
}

.navitem {
  float: left;
  margin-right: 20px;
}

.greeting {
  position: fixed;
  right: 0px;
  margin-right: 200px;
  background-color: #000000;
  padding: 0 10px 0 10px;
}

.greetext {
  color: #ffffff;
  line-height: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
  <div class="greeting" id="greeting">
    <p class="greetext" id="greetext">ahoy matey!</p>
  </div>
  <nav>
    <h2 class="navitem"><a href="">WORK</a></h2>
    <h2 class="navitem"><a href="">SKILLS</a></h2>
    <h2 class="navitem"><a href="">ABOUT</a></h2>
    <h2 class="navitem"><a href="">CONTACT</a></h2>
  </nav>
</body>

</html>

Solution

Try it this way - ul instead of H2's:

<head>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
    <div class="greeting" id="greeting">
        <p class="greetext" id="greetext">ahoy matey!</p>
    </div>
    <nav>
        <ul>
            <li class="navitem">WORK</li>
            <li class="navitem">SKILLS</li>
            <li class="navitem">ABOUT</li>
            <li class="navitem">CONTACT</li>
        </ul>
    </nav>
</body>

</html>

Styles:

html,
            body {
                height: 100%;
                margin: 0;

            }

            nav {

                float: right;
            }

            .navitem {
                display: block;
                margin-right: 20px;
-webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
                padding: 20px;

            }

            .greeting {
                position: fixed;
                right: 0px;
                margin-right: 200px;
                background-color: #000000;
                padding: 0 10px 0 10px;
            }

            .greetext {
                color: #ffffff;
                line-height: 5px;
            }
        }