title: How can I make all buttons the same width
body: <p>I am trying to make a navbar that spans from one side of the page to another. I have 5 main items in my navigation but it's still chopping my buttons too short. I'm using a sample code from W3 schools, however the code wasn't exactly what I was looking for (having multiple dropdowns) so I tweaked it. </p>
  
  <p>Here is my code:</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>#sideNavBox {
    DISPLAY: none
  }
  
  #contentBox {
    margin-left: 0px!important
  }
  
  .w3-container {
    width: 100%;
    text-align: center;
    position: relative;
  }
  
  .w3-button {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;W3.CSS&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  
  &lt;body&gt;
    &lt;div class="w3-container"&gt;
      &lt;h2&gt;Navigation Bar with Dropdown&lt;/h2&gt;
      &lt;p&gt;Add a dropdown menu inside the navigation bar:&lt;/p&gt;
  
      &lt;div class="w3-bar w3-light-grey"&gt;
        &lt;a href="#" class="w3-bar-item w3-button w3-hover-red" style="width: 20%"&gt;Home&lt;/a&gt;
  
        &lt;div class="w3-dropdown-hover"&gt;
          &lt;button class="w3-button w3-hover-red" style="width: 20%"&gt;Blog&lt;/button&gt;
          &lt;div class="w3-dropdown-content w3-bar-block w3-card-4"&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="w3-dropdown-hover"&gt;
          &lt;button class="w3-button w3-hover-red" style="width: 20%"&gt;Members&lt;/button&gt;
          &lt;div class="w3-dropdown-content w3-bar-block w3-card-4"&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="w3-dropdown-hover"&gt;
          &lt;button class="w3-button w3-hover-red" style="width: 20%"&gt;Files&lt;/button&gt;
          &lt;div class="w3-dropdown-content w3-bar-block w3-card-4"&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="w3-dropdown-hover"&gt;
          &lt;button class="w3-button w3-hover-red" style="width: 20%"&gt;Bookmarks&lt;/button&gt;
          &lt;div class="w3-dropdown-content w3-bar-block w3-card-4"&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Misc.&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;SIM Search Engine&lt;/a&gt;
            &lt;a href="#" class="w3-bar-item w3-button w3-hover-red"&gt;Goal Tree&lt;/a&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>