title: Floating li components and keeping the ul border
body: <p>The following code is what I use to style and display a navigation bar at the top of my page. However, there are lines in-between the different <code>li</code> elements.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  .top-nav.fixed {
    float: right;
    position: relative;
    right: 50%;
    /* or right 50% */
    text-align: left;
  }
  .top-nav.fixed ul {
    background: blue;
    margin-top: 10px;
    position: relative;
    left: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: blue;
  }
  .top-nav.fixed li {
    display: inline-block;
    background: red;
  }
  .top-nav.fixed a {
    display: block;
    padding: 10px;
  }
  .top-nav ul {
    list-style: none;
  }
  .top-nav a {
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="top-nav fixed" role="navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In order to fix this, I changed the code to the following.</p>
  
  <pre><code>.top-nav.fixed li {
    display: inline-block;
    float: left;
    background: red;
  }
  </code></pre>
  
  <p>This brought around a new problem. The <code>ul</code> border no longer went around the <code>li</code> elements. My question; how do you get the <code>ul</code> border to go around all the <code>li</code> elements as it did before they were floated?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  .top-nav.fixed {
    float: right;
    position: relative;
    right: 50%;
    /* or right 50% */
    text-align: left;
  }
  .top-nav.fixed ul {
    background: blue;
    margin-top: 10px;
    position: relative;
    left: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: blue;
  }
  .top-nav.fixed li {
    display: inline-block;
    float: left;
    background: red;
  }
  .top-nav.fixed a {
    display: block;
    padding: 10px;
  }
  .top-nav ul {
    list-style: none;
  }
  .top-nav a {
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="top-nav fixed" role="navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>