title: How to create two HTML buttons side by side
body: <p>This is a snippet of code for two buttons. I want them to be side by side but currently, one button is on top of other. as you can see </p>
  
  <p><a href="https://i.stack.imgur.com/0j0Va.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0j0Va.png" alt="Buttons on top of each other"></a>
  <a href="https://i.stack.imgur.com/gK3D4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gK3D4.png" alt="I want it to look like this"></a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="buttons"&gt;
  
              &lt;div class="action_btn"&gt;
  
              &lt;button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()"&gt;Save&lt;/button&gt;
              &lt;button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()"&gt;Cancel&lt;/button&gt;
  
              &lt;p id="saved"&gt;&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .buttons {
  width: 960px;
  margin: 0 auto;}
  
      .action_btn {
  width: 500px;
  margin: 0 auto;}
  </code></pre>