title: How do I make my list item display inline?
body: <p>Title says pretty much all. Whenever I use <code>display: inline</code> in the css for the list item, it doesn't do anything.</p>
  <p>[![Image of the problem][1]][1]</p>
  <p>I would like for the list items to display inline, if anyone could help guide me to the right direction, that would be greatly appreciated.</p>
  <p><strong>CSS</strong></p>
  <pre><code>.clipit-routes {
      flex: 2;
      justify-content: center;
  }
  
  .nav-links {
      justify-content: space-around;
      list-style: none;
  }
  
  .nav-link {
      display: flex;
      text-decoration: none;
      display: inline;
  }
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>            &lt;div class=&quot;clipit-routes&quot;&gt;
                  &lt;ul class=&quot;nav-links&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Upload&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Github&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
  
    [1]: https://i.stack.imgur.com/AidjI.png
  </code></pre>