title: Distribute buttons in div evenly
body: <p>I have the following code (<a href="https://jsfiddle.net/kh6wg9f4/" rel="nofollow">JSFiddle</a>):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div id="mainBox" class="textBox"&gt;
      &lt;div id="mainMenuBar"&gt;
        &lt;button class="jqueryUIButton"&gt;New Diagnosis&lt;/button&gt;
        &lt;button class="jqueryUIButton"&gt;My Diagnosises&lt;/button&gt;
        &lt;button class="jqueryUIButton"&gt;My Account&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#mainMenuBar {
      background: linear-gradient(to bottom right, #30273a, #8d78a5);
      padding: 5px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      resize: none;
      border:1px solid #30273a;
      box-shadow: 0 0 10px #8d78a5;
      border-radius: 15px 15px 15px 15px;
  }
  
  #content {
      margin: 0 auto;
      margin-top: 100px; // former 250px
      padding: 0;
      width: 750px;
      max-width: 80%;
      padding-bottom: 40px;
      text-align: center;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$( ".jqueryUIButton" ).button();
  </code></pre>
  
  <p>Now the three buttons are in the horizontal center of the DIV-Box. But I want them evenly distributed over the whole width. How can I do that?</p>
  
  <p>Would love any advice. Thanks!</p>