Removing line breaks in navbar - html

Question

I am creating a navbar with a logo on the left side on the navbar and the links on the right side of the navbar. Although I have been successful, there are some unwanted line breaks in the text on the right side of the navbar. How do I get rid of the line breaks in the texts "How it works" and "Available Products"? I am not using Bootstrap and I do not want to use it.
* {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}
.container {
align-items: center;
justify-content: center;
display: flex;
}
img {
max-width: 100%;
width: 72.5%;
height: auto;
}
.logo {
flex-basis: 75%;
margin-top: 10px;
margin-left: 10px;
}
.nav-link {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
padding-right: 20px;
}
<header id="header">
<nav id="nav-bar">
<div>
<ul>
<div class="container">
<div class="logo">
<li>
<img
id="header-img"
src="https://i.ibb.co/5Mcnrcm/N-logo.png"
style="vertical-align: middle"
/>
</li>
</div>
<li><a class="nav-link" href="#f">Features</a></li>
<li><a class="nav-link" href="#h">How It Works</a></li>
<li><a class="nav-link" href="#a">Available Products</a></li>
</div>
</ul>
</div>
</nav>
</header>

Answer 1

It can be done by applying CSS white-space: nowrap; to e.g. .nav-link as shown below:
* {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}
.container {
align-items: center;
justify-content: center;
display: flex;
}
img {
max-width: 100%;
width: 72.5%;
height: auto;
}
.logo {
flex-basis: 75%;
margin-top: 10px;
margin-left: 10px;
}
.nav-link {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
padding-right: 20px;
white-space: nowrap;
}
<header id="header">
<nav id="nav-bar">
<div>
<ul>
<div class="container">
<div class="logo">
<li>
<img
id="header-img"
src="https://i.ibb.co/5Mcnrcm/N-logo.png"
style="vertical-align: middle"
/>
</li>
</div>
<li><a class="nav-link" href="#f">Features</a></li>
<li><a class="nav-link" href="#h">How It Works</a></li>
<li><a class="nav-link" href="#a">Available Products</a></li>
</div>
</ul>
</div>
</nav>
</header>