title: How to remove top nav bar border
body: <p>I have a top navigation bar that still has the white borders around. I would like to know how to remove them using css.</p>
  
  <p>This is the css:</p>
  
  <pre><code>#nav {
          width: 100%;
          float: left;
          margin: 0 0 3em 0;
          padding: 0;
          list-style: none;
          background-color: #4c4c4c;
          }
  
          #nav li {
          float: left; 
          }
  
          #nav li a {
          display: block;
          padding: 8px 15px;
          text-decoration: none;
          font-weight: bold;
          color: white;
          border-right: 1px solid #ccc; 
          }
  
          #nav li a:hover {
          color: grey;
          background-color: white; 
          }
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;ul id="nav"&gt;
                &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Our Products&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks.</p>