Hi there I was just wondering what would be the best way to scale my navbar so that the size of the boxes are relative to the screen width?

Just trying to have it a little bit responsive. Thanks

[![Full screen](https://i.stack.imgur.com/tJid4.png)](https://i.stack.imgur.com/tJid4.png)

[![Pressed F12 to reduce width of screen](https://i.stack.imgur.com/YSvVu.png)](https://i.stack.imgur.com/YSvVu.png)

Here is the CSS:

```css
body {
  background-image: url("background2.jpg");
}
#navbar ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin-left: 5%;
}
#navbar ul li {
  display: inline;
  float: left;
}
#navbar a:link {
  text-decoration: none;
  padding: 15px 162.5px;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  color: white;
  background-color: #003333;
  font-size: 25px;
  font-family: Courier New;
}
#navbar ul li a:hover {
  color: black;
  background-color: #c2d6d6;
  text-decoration: line-through;
}
#navbar {
  background-color: #003333;
  width: 100%;
  height: 68px;
  border-radius: 15px;
}
a {
  display: block;
  width: 100px;
  background-color: #003333;
  transition-duration: 1s;
}
#navbar #currentpage a {
  color: black;
  text-decoration: line-through;
  background-color: #c2d6d6;
}
```

[EDIT] Thank you for all your answers!