title: How can I make the space between the items of the nav bar be the same between each other
body: <p>I'm trying to make the space between the items of the navbar be the same between each other. Sounds like something simple but I haven't managed to do it. I would really appreciate some help with this. Here's the HTML and the CSS. Here's the relevant code:<a href="https://i.stack.imgur.com/9p7z5.jpg" rel="nofollow noreferrer">Here's a photo of the output</a></p>
  <p>HTML:</p>
  <pre><code>&lt;nav class=&quot;menu&quot;&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;tweets.html&quot;&gt;Why programming? &lt;a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;goals.html&quot;&gt;Aspirations and goals&lt;a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;my_projects.html&quot;&gt;Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;books.html&quot;&gt;Favourite books&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;interests.html&quot;&gt;Interests&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>nav{
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      right: -90px;
      flex-wrap: wrap;
      bottom:10px;
      align-items:flex-end;
      font-size: 20 px;
      padding: 0px;
      line-height: 0px;
      padding-left:50px;
      padding-right: 50px;}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/9p7z5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9p7z5.jpg" alt="enter image description here" /></a></p>