title: How do I include short vertical lines in between links in navbar?
body: <p><strong>What I'm looking for:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/8pIRr.png" alt="What I&#39;m looking for"> /</p>
  
  <p><strong>What I've got:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/hv6Sl.png" alt="What I&#39;ve got"></p>
  
  <p>I want to include small vertical lines, evenly spaced with matching color, in between the links in my navbar. Below is the CSS code I've written. I'm new to coding and I've searched Google but I keep seeing the same answer which got me these huge lines that I don't want. ???</p>
  
  <pre><code>    /* GLOBAL */
      body {
          margin: 0 auto;
          background: grey;
          font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
          font-weight: 300;
      }
  
  
      /* NAVBAR */
      header {
          background: #ffffff;
          max-width: 100%;
          border-bottom: 2px solid #777777;
      }
  
      header::after {
          content: '';
          display: table;
          clear: both;
      }
  
      .container {
          margin: 0 auto;
          max-width: 960px;
      }
  
      .logo {
          float: left;
          background-color: #4aaaa5;
          color: #ffffff;
          margin: 0;
          padding: 20px 30px;
          display: inline-block;
          font-family: 'Georgia', Times, 'Times New Roman', serif;
      }
  
      nav {
          float: right;
      }
  
      nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
      }
  
      nav li {
          display: inline-block;
          padding-top: 30px;
          margin-left: 20px;
          **border-right: 1px solid #777777;**  
      }
  
      nav a {
          color: #777777;
          text-decoration: none;
      }
  
      nav li:last-of-type {
          **border-right: none;**
      } 
  
      nav a:hover {
          color: #4aaaa5;
      }
  
  ===========================================================================
   &lt;body&gt;
    &lt;header&gt;
     &lt;div class="container"&gt;
      &lt;h1 class="logo"&gt;Name&lt;/h1&gt;
      &lt;nav&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a class="active" href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="content.html"&gt;Content&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/nav&gt;
     &lt;/div&gt;
    &lt;/header&gt;
   &lt;/body&gt;
  </code></pre>