I’m trying to implement something like a web page navbar. I have code like this:

```css
nav {
  position: relative;
  display: inline-block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  right: 0px;
  list-style: none;
}
```

```html
<nav>
  <h2>My First Website</h2>
  <ul class="nav-right">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
```

I have known that an absolute element is positioned to its first positioned (not static) ancestor element. I have set position property of element nav as absolute, but it looks like the `<ul>` run out of the `<nav>` range. In other word **i'm confused about why nav'height is less than ul's** Thanks a lot.

[![enter image description here](https://i.stack.imgur.com/nd02e.png)](https://i.stack.imgur.com/nd02e.png)