title: Is there a way to make these list elements the same size?
body: <p>I'm fairly new to HTML and CSS. I'm trying to get some navigation buttons to have the same size, one third of the width of the panel that they sit in. I've been given the original code and while I can tweak it, I can't replace it outright.</p>
  
  <p>The buttons are in an unordered list. They're arranged horizontally and should fill the entire width of the panel they're in. In Internet Explorer they are rendered correctly, each being the same size. In Chrome and Firefox they are slightly different sizes: the button with the shortest displayed text has the smallest width, and as the text gets longer, so does the button. All of the text strings are much smaller than their buttons, so the buttons should not need to grow to accomodate the string.</p>
  
  <p>The code sets the list item elements to 1% width, which I've read is a hacky way to get them to take up approximately the same size. Common sense suggests that 33% should give me what I want, but instead the total width occupied by all three buttons is about 33%, leaving the rest of the space that they're supposed to fill empty. I've tried various different percentages but the result is not what I'd expect: 10% seems to work for wider windows but not for narrow ones; between 10-33% the buttons are the same size but get gradually smaller, no longer filling the available space; anything above 33% and the buttons start growing again, but only the first two and without necessarily filling the available space.</p>
  
  <p>I've tried changing the display property for the li elements from table-cell but none of the options seem to work. Similar changes for the ul elements are also unhelpful. I also thought that reducing the max-width for the text strings to abotu 80% might stop the buttons from growing proportionally to the length of the string, but it made no difference. </p>
  
  <p>The list:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
  }
  
  html {
    font-size: 62.5%;
  }
  
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
      min-width: 400px;
      background-color: #bbc98f;
  }
  
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  
  .nav-pills &gt; li {
    float: left;
      border-style: solid;
      text-align: center;
  }
  
  .nav-pills &gt; li + li {
    margin-left: 2px;
  }
  
  .nav-justified &gt; li {
    float: none;
      display: table-cell;
      width: 1%;
  }
  
  .panel {
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: #ffffff;
  }
  
  .panel-body {
    padding: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
  &lt;body class=""&gt; 
      &lt;div class="body-content"&gt;
    &lt;div class="panel panel-body"&gt;
     &lt;ul class="nav nav-pills nav-justified"&gt;
      &lt;li&gt;
       &lt;a href="/PartLibrary/Parts"&gt;Parts&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;a href="/PartLibrary/Recipes"&gt;Recipes&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;a href="/PartLibrary/RobotPrograms"&gt;Robot Programs&lt;/a&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd like all three buttons to be the same size regardless of the page width when they're in a single row (they already switch to a vertical stack below a particular width). What am I missing?</p>
  
  <p>Thanks in advance.</p>