Removing line breaks in navbar

July 29, 2022

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>

>Solution :

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>