title: How to make nav-item take the needed width for its content to show in one line?
body: <p>I'm trying to make my nav-item elements take the needed width for them to display their content in one line, because right now the content gets wrapped in 2 lines:</p>
  
  <p><strong>Code:</strong></p>
  
  <p><a href="https://jsfiddle.net/tavyhkem/2/" rel="nofollow noreferrer">https://jsfiddle.net/tavyhkem/2/</a></p>
  
  <pre><code>    &lt;ul class="navbar-nav mt-2 mt-lg-0"&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;
                  &lt;h5 class="no-margin-bottom"&gt;
                      &lt;i class="fas fa-user"&gt;&lt;/i&gt;
                      My Account
                  &lt;/h5&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;
                  &lt;h5 class="no-margin-bottom"&gt;
                      &lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;
                      Cart
                  &lt;/h5&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Result needed:</strong></p>
  
  <p>I need the items "My Account" and "Cart" to take as much width needed for them to stay in one line.</p>
  
  <p>Is this because of my inline w-100 search bar?</p>