title: How to center 2 buttons next to each other
body: <p>I'm trying to center 2 buttons on the page next to each other side by side. I have set the display as inline-block and text-align as center but it remains left aligned. What am I doing wrong? <a href="https://jsfiddle.net/chLm4xj3/7/" rel="nofollow noreferrer">https://jsfiddle.net/chLm4xj3/7/</a></p>
  
  <pre><code>.modal-content {
  background-color: white;
  margin: auto;
  padding: 40px;
  border: 1px solid red;
  width: 80%;
  border-radius: 15px;
  box-shadow: 0em 0em .5em rgba(0 0 0 0.75);
  text-align: center;
  }
  
  button {
  border: 1px solid red;
  color: white;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  margin: auto;
  background-color: #4CAF50;
  border-radius: 30px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  }
  </code></pre>