I'm trying to build a website but the header and list items kind of merge or go on top of each other on resize
I'm not sure why.
is there a way to solve this without JS or Bootstrap?

[Screenshot of the problem](https://i.stack.imgur.com/Pzqpi.png)
It looks fine in normal full-screen mode but the problem happens when I resize, I want them to be responsive.

another thing, I want the list items to [look like this](https://i.stack.imgur.com/capRq.jpg), how?
like this wavy line thing

```css
#main-header{
  font-size: 20px;
  font-family:monospace, Helvetica;
  text-align: center;
  line-height:0;
}
#main-header h1{
  font-family:'lobster', monospace;
  font-size: 80px;
  text-shadow: 2px 4px #72bcd4;
}
#main-header small{
font-style:italic;
text-decoration:underline;
text-decoration-color:#72bcd4;
text-align:right;
}
#navbar{
  text-align:center;
  margin-top: 90px;
  padding:100px;
  font-family:'Tangerine', cursive;
  font-size: 40px;
}
#navbar ul{
  word-spacing: 2%;

}
#navbar li{
  display:inline;
  line-height: 30px;
}
#navbar a{
  text-decoration:none;
  font-weight:bold;
  border-color:black;
  border-style:groove;
  border-radius: 70px;
  padding: 20px;
  word-spacing:inherit;
}
```

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bla Bla Bla</title>
  <link rel="stylesheet" type="text/css" href="./CSS/style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>
<body>
  <header id="main-header">
    <h1>.Bla Bla Bla.</h1>
    <small>
      Lorem ipsum dolor sit amet.
    </small>
  </header>
  <nav id="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  </nav>
  <footer>
    Lorem ipsum dolor sit amet, consectetur adipisicing.
  </footer>
</body>
</html>
```

```css
/*general header settings*/
#main-header{
  font-size: 20px;
  font-family:monospace, Helvetica;
  text-align: center;
  line-height:0;
}
#main-header h1{
  font-family:'lobster', monospace;
  font-size: 80px;
  text-shadow: 2px 4px #72bcd4;
}
#main-header small{
font-style:italic;
text-decoration:underline;
text-decoration-color:#72bcd4;
text-align:right;
}
#navbar{
  text-align:center;
  margin-top: 90px;
  padding:100px;
  font-family:'Tangerine', cursive;
  font-size: 40px;
}
#navbar ul{
  word-spacing: 2%;

}
#navbar li{
  display:inline;
  line-height: 30px;
}
#navbar a{
  text-decoration:none;
  font-weight:bold;
  border-color:black;
  border-style:groove;
  border-radius: 70px;
  padding: 20px;
  word-spacing:inherit;
}
```