Trouble centering two divs horizontally

Question

I'm trying to center the the div containing the image and the div containing the form horizontally rather than vertically using bulma and it's just not responding. It just stays vertical no matter what I do. I've tried flex-row, justified center, align center and nothing it working. What else can I do about this?

<section class="contact section is-small">
  <h2 class="contact-header is-size-1"> Contact Me</h2>
  <!-- Form -->
  <div class="contact-form is-flex is-flex-direction-row">
    <div class="form">
      <form>
        <p>Name</p>
        <input type="text" class="input is-normal" placeholder="First Name">
        <input type="text" class="input is-normal" placeholder="Last Name">
        <p>E-mail Address</p>
        <input class="input" type="email" placeholder="E.g. 'john.smith@gmail.com'">
        <p>Message</p>
        <textarea class="fixed size textarea" placeholder="What's up?"></textarea>
        <button class="button">Submit</button>
      </form>
      <div>
        <img src="" class="">
      </div>
    </div>
  </div>
</section>

Answer 1

Add display: flex; with justify-content: center; to parent div contact-form. You can then center your h2 which is not justified in the center from flex by adding text-align: center;.

Added a dummy image to demonstrate.

<section class="contact section is-small">
  <h2 class="contact-header is-size-1" style="text-align: center;"> Contact Me</h2>
  <!-- Form -->
  <div class="contact-form is-flex is-flex-direction-row">
    <div class="form" style="display: flex; justify-content: space-evenly; align-items: center;">
      <form>
        <p>Name</p>
        <input type="text" class="input is-normal" placeholder="First Name">
        <input type="text" class="input is-normal" placeholder="Last Name">
        <p>E-mail Address</p>
        <input class="input" type="email" placeholder="E.g. 'john.smith@gmail.com'">
        <p>Message</p>
        <textarea class="fixed size textarea" placeholder="What's up?"></textarea>
        <button class="button">Submit</button>
      </form>
      <div>
        <img src="https://dummyimage.com/600x400/000/fff" class="text-center">
      </div>
    </div>
  </div>
</section>