Why is the Flex text overlapping when Browser size is reduced?

If you reduce browser size, the text of "Discover" and "How it Works" overlap so that it looks like it says "Discover it works" "How".

How do I make it so that instead, the text of these Li items always stay separated? I tried doing flex: nowrap property but it had no effect.

Here is the codepen to show what I mean: https://codepen.io/hiarooo/pen/GRrzapM

Thanks for any help.

HTML

<header>
        <div class="container">
            <nav>
                <div class="left-content">
                    <div class="header-user">
                        <img src="HOME/DoLogo.png" alt="logo" width="50px">
                        <p><span>Do</span></p>
                    </div>
                    
                    <div class="header-tablet">
                        <div class="vl"></div>
                        <ul>
                            <li><a href="#">Discover</a></li>
                            <li><a href="#">How it works</a></li>
                        </ul>
                    </div>
                   
                </div>

                <div class="right-content">
                        <div class="search">
                            <input type="text" placeholder="Search">
                            <i class="fas fa-search"></i>
                        </div>
                        
                        <img id="notifications" src="HOME/Notification.svg" alt="Notification">
                        
                        <div class="header-user">
                            <img src="HOME/uploadnav.png" alt="user">
                            
                        </div>
                        <img class="mob" src="HOME/uploadnav.png" alt="user">
                        <a href="#" class="menu"><img src="HOME/menu.svg" alt="hamburgermenu"></a>
                </div>
            </nav>
            
            
        </div>
    </header>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 78%;
  margin: 0 auto;
}

@media (max-width: 1330px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* Header */

header {
  height: 80px;
  border: 1px solid #e6e8ec;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#notifications{
    padding-right:20px;
}



.search {
  display: inline;
  height: 40px;
  width: 256px;
  border-radius: 8px;
  padding: 10px 12px 10px 16px;
  border: 2px solid #e6e8ec;
  outline: none;
  display: flex;
  justify-content: space-between;
  margin-right: 18px;
  margin-left: 20px;
}

.search input {
  outline: none;
  border: none;
}

.search i {
  color: #777e90;
}

.search:hover {
  cursor: pointer;
}

.search input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.button {
  background-color: #3772ff;
  padding: 12px 16px;
  border-radius: 90px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #fcfcfd;
  text-decoration: none;
  margin-left: 18px;
  margin-right: 10px;
  display: inline;
}

.header-user {
  border-radius: 90px;
  padding: 4px 12px 4px 4px;
  border: 2px #e6e8ec solid;
  width: 147px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-user p {
  padding-left: 6px;
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

.header-user span {
  color: #45b26b;
  padding-left: 2px;
}

.left-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.mob {
  display: none;
}

.vl {
  border-left: 2px #e6e8ec solid;
  height: 40px;
  margin: 0 32px;
}

.left-content ul {
  list-style: none;
}

.left-content ul li {
  display: inline;
}

.left-content ul li a {
  text-decoration: none;
  padding-right: 32px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: #777e90;
}

.right-content {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.right-content img {
  cursor: pointer;
}

.menu {
  display: none;
}

.header-tablet {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
    
    
}




.topFont{
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
}



.btn-1 {
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: #23262f;
  border: 2px solid #e6e8ec;
  border-radius: 90px;
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: 0px;
}

.btn-1:hover {
  background-color: #3772ff;
  color: #fcfcfd;
  /*border: none;*/
  transition:all .2s ease;
  -webkit-transition-delay:all .2s ease;
  -moz-transition-delay:all .2s ease;
  -ms-transition-delay:all .2s ease;
  -o-transition-delay:all .2s ease;
}


/* input */

.round {
  max-width: 100%;
  height: 48px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px #f4f4f4 solid;
  border-radius: 90px;
  margin: 20px 0px;
}

.round i {
  color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  line-height: 80px;
}

.round input {
  outline: none;
  border: none;
  padding-left: 16px;
}

.search-btn {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 12px;
}

.round input::-webkit-input-placeholder {
  font-family: "Poppins", sans-serif;
  color: #777e90;
  font-size: 12px;
}

.search-icon:hover {
  cursor: pointer;
  color: #3772ff;
}



@media (max-width: 1170px) {
 

  .round {
    width: 200px;
  }
}

@media (max-width: 960px) {
  

  .round {
    width: 200px;
  }
}

@media (max-width: 779px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }

    .header-tablet{
        display:none;
    }
  .search {
    display: none;
  }

  .menu {
    display: inline;
  }

  .button {
    display: none;
  }

  /* header user */
  .header-user {
    display: none;
  }