I have `buttons` inside a `nav` and the content of the buttons are overlapping, I wans't able to figure out what was causing it. 

How can I prevent overlapping of the button contents?

```css
body,html
{
  padding: 0;
  margin: 0;
}

nav
{
    background-color: #e05138;
    height: 82px;
    width: 100%
}
button
{

  display: inline-block;

  text-align: center;

  background-color: white;

  text-decoration: none;

  border: none;
  border-radius: 20px;

  padding: 30px;
  margin: 5px;

  float: right;

  width: 100px;

  line-height: 5px;
}
```

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My web Page</title>

    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>
    <nav>

      <button type="button" name="Contact">Contact</button>
      <button type="button" name="About Me">About Me</button>

    </nav>
  </body>
</html>
```