title: I would like to horizontally align buttons and center them with css
body: <p>I'm trying to align 4 buttons horizontally in the center top of the page with css. this is what I have</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>button {
    background-color: rgb(243, 243, 243);
    border: 5px;
    color: #000000;
    padding: 15px 32px;
    text-align: center;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    cursor: pointer;
    display: block;
    margin: auto;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>whenever i do this, the buttons get align in the center but also vertically, they should be horizantaly. I already tried this: </p>
  
  <p>display: inline-block;
  instead of
  display: block;</p>
  
  <p>but then my buttons become aligned horizonatlly but not center on top of my page. </p>